Question

您可以使用align-items覆盖align-self以获取灵活项目。我正在寻找一种方法来覆盖弹性项目的justify-content。

如果您有一个带有justify-content:flex-end的Flexbox容器，但您希望第一个项目为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>

¹此行为为defined by the Flexbox spec。

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容器和孤独子的顺序。

Answer 4

似乎justify-self即将推出浏览器。 Hashmap and how this works behind the scene上已有一篇文章。在撰写本文时，浏览器支持很差。

关于保证金解决方案：我有一个有差距的Flexbox网格。 Flexbox没有flex-gap属性（还有？）。所以对于排水沟，我使用填充和边距，因此margin: auto需要覆盖其他边距......

Answer 5

对于您想知道flex-end项目宽度的情况，您可以将其flex设置为“0 0 ## px”，并使用{flex-start设置您想要的项目{1}}

这将导致伪flex:1项填充容器，只需将其格式化为flex-start或其他任何内容。

Answer 6

我通过将内部项目的样式设置为margin: 0 auto来解决类似的情况情况：我的菜单通常包含三个按钮，在这种情况下，它们需要为justify-content: space-between。但是当只有一个按钮时，它现在将是中心对齐而不是左对齐。

Answer 7

要扩展Pavlo的答案https://stackoverflow.com/a/34063808/1069914，您可以在其行为中包含多个子项justify-content: flex-start，但要保留最后一个项justify-content: flex-end

.container {
  height: 100px;
  border: solid 10px skyblue;
  display: flex;
  justify-content: flex-end;
}

.container > *:not(:last-child) {
    margin-right: 0;
    margin-left: 0;
}

/* set the second to last-child */
.container > :nth-last-child(2) {
    margin-right: auto;
    margin-left: 0;
}

.block {
  width: 50px;
  background: tomato;
  border: 1px solid black;
}

<div class="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block" style="width:150px">I should be at the end of the flex container (i.e. justify-content: flex-end)</div>
</div>

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

7 个答案: