如何证明单个flexbox项的合理性(覆盖justify-content)

Question

您可以覆盖align-items有align-self一个弯曲的项目.我正在寻找一种覆盖justify-contentflex项目的方法.

如果你有一个flexbox容器justify-content:flex-end,但你想要第一个项目justify-content: flex-start,那怎么办呢？

这篇文章最好回答:https://stackoverflow.com/a/33856609/269396

Answer 1

似乎没有要justify-self,但你可以达到同样的效果设置适当的margin给auto¹.E. g.对于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>

¹此行为由Flexbox规范定义.

Answer 2

AFAIK在规范中没有属性,但这里有一个我一直在使用的技巧:设置容器元素(带有的那个display:flex)justify-content:space-around 然后在第一个和第二个项目之间添加一个额外的元素并将其设置为flex-grow:10(或者一些适用于您的设置的其他值)

编辑:如果项目紧密对齐,那么添加flex-shrink: 10;到额外元素也是一个好主意,因此布局将在较小的设备上正确响应.

Answer 3

如果您实际上并不局限于将所有这些元素保留为兄弟节点,则可以将其中的元素包装在另一个默认弹性框中,并使两者的容器之间使用空格.

.space-between {
  border: 1px solid red;
  display: flex;
  justify-content: space-between;
}
.default-flex {
  border: 1px solid blue;
  display: flex;
}
.child {
  width: 100px;
  height: 100px;
  border: 1px solid;
}

<div class="space-between">
  <div class="child">1</div>
  <div class="default-flex">
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>

或者如果你使用flex-start和flex-end反转做同样的事情,你只需要交换default-flex容器和孤独子的顺序.