如何证明单个弹性框项目（覆盖 justify-content）

小编典典

如何证明单个弹性框项目（覆盖 justify-content）

all

您可以覆盖align-items弹性align-self项目。我正在寻找一种覆盖justify-content弹性项目的方法。

如果你有一个带有的 flexbox 容器justify-content:flex-end，但你希望第一个项目是justify-content: flex-start，那该怎么做呢？

阅读 117

2022-03-28

共1个答案

小编典典

似乎没有，但您可以实现适合鹿的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>

鹿这种行为是由 Flexbox 规范定义的。

2022-03-28