对于弹性物品,可以将align-items
替换为align-self
.
如果您有一个包含justify-content:flex-end
个项目的Flexbox容器,但是您希望第一个项目是justify-content: flex-start
,那么如何做到这一点呢?
对于弹性物品,可以将align-items
替换为align-self
.
如果您有一个包含justify-content:flex-end
个项目的Flexbox容器,但是您希望第一个项目是justify-content: flex-start
,那么如何做到这一点呢?
似乎没有justify-self
个,但您可以获得类似的结果设置,适当的margin
到auto
?例如,对于flex-direction: row
(默认值),您应该设置margin-right: auto
来将子项与左侧对齐.
.container {
height: 100px;
border: solid 10px skyblue;
display: flex;
justify-content: flex-end;
}
.block {
width: 50px;
background: tomato;
}
.justify-start {
margin-right: auto;
}
<div class="container">
<div class="block justify-start"></div>
<div class="block"></div>
</div>