CSS justify-self ominaisuus
- 上一页 justify-items
- Seuraava sivu @keyframes
Määrittely ja käyttö
justify-self ominaisuus kohdistaa ruudukon kohteen ruudukon solun sisällä rivivaiheen suuntaan.
Englanninkielisillä sivuilla rivivaihe on vasemmalta oikealle, lohkovaihe on alaspäin.
Jos haluat, että tämä ominaisuus vaikuttaa, ruudukon kohteen täytyy olla saatavilla tilaa ympärillä itseään rivivaiheen suuntaan.
Vinkki:Jos haluat kohdistaa ruudukon kohteen lohkoyläpuolelle sen sijaan, että se kohdistuisi rivivaiheen suuntaan, käytä: align-self ominaisuus Tai align-items ominaisuus Ominaisuudet.
Katso myös:
CSS-opas:CSS Grid
CSS-opas:CSS-sijoittelu
CSS viittausopas:align-content ominaisuus
CSS viittausopas:align-items ominaisuus
CSS viittausopas:align-self ominaisuus
CSS viittausopas:direction ominaisuus
CSS viittausopas:grid ominaisuus
CSS viittausopas:grid-template-columns ominaisuus
CSS viittausopas:position ominaisuus
CSS viittausopas:writing-mode ominaisuus
Katso myös:
Esimerkki
Esimerkki 1
Kohdista ruudukon kohta sen ruudukon solun oikealle puolelle:
.red { display: grid; justify-self: right; }
Esimerkki 2: justify-self verrattuna justify-items
Aseta konttia suhteellisesti kohdistettu tapa 'keskitetty', ruudukon kohta itsessään 'oikealle tasolle'. Ominaisuuden arvo 'right' on ylivoimainen:
#container { display: grid; justify-items: center; } .blue { justify-self: right; }
Esimerkki 3: Aseta justify-self absoluuttisesti sijoitetun ruudukon kohtaan
Aseta absoluuttisesti sijoitetun ruudukon kohdan kohdistus tapa 'right':
#container { display: grid; position: relative; } .red { position: absolute; justify-self: right; }
Esimerkki 4: writing-mode
Kun ruudukon konttieleminen writing-mode-ominaisuuden arvo asetetaan vertical-rl, rivivaihe on alaspäin. Tämä tarkoittaa, että kontin lähtökohta siirtyy vasemmasta ylös ja kontin loppupää oikeasta alaspäin:
#container { display: grid; writing-mode: vertical-rl; } .blue { justify-self: end; }
示例 5:direction
当网格容器元素的 direction 属性值设置为“rtl”时,行内方向是从右到左。结果是容器的起点从左侧移到右侧,容器的末端从右侧移到左侧:
#container { display: grid; direction: rtl; } .blue { justify-self: end; }
CSS 语法
justify-self: auto|normal|stretch|positional alignment|overflow-alignment|baseline alignment|initial|inherit;
属性值
值 | 描述 |
---|---|
auto | 默认值。继承网格容器的 justify-self 属性值。 |
normal |
取决于布局上下文,但类似于未设置 size 时网格项在网格布局中的 'stretch'。 如果设置了 size ,则属性值的行为类似于 'start'。 |
stretch | 如果未设置 inline-size(宽度),则拉伸以填充网格单元格。 |
start | 在行内方向的开头对齐项目。 |
left | 将项目左对齐。 |
center | 将项目对齐到中心。 |
end | 在行内方向的末尾对齐项目。 |
right | 将项目右对齐。 |
overflow-alignment |
|
baseline alignment | 元素与父元素的基线对齐。 |
initial | 将此属性设置为其默认值。参阅 initial。 |
inherit | 从其父元素继承此属性。参阅 inherit。 |
技术细节
默认值: | auto |
---|---|
继承: | 否 |
动画制作: | 不支持。请参阅:动画相关属性。 |
版本: | CSS3 |
JavaScript 语法: | object.style.justifySelf="right" |
浏览器支持
表中的数字注明了首个完全支持该属性的浏览器版本。
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | IE / Edge | Firefox | Safari | Opera |
57.0 | 16.0 | 45.0 | 10.1 | 44.0 |
- 上一页 justify-items
- Seuraava sivu @keyframes