有没有办法为 flexbox 容器内的不同行设置不同的 justify-content 值？

Question

有没有办法让 flexbox 容器内的不同行具有不同的 justify-content 值？这是我的 html:

    <div class="wrapper flex-container">
      <div class="flex-item">
        <h2>Text</h2>
        <p>Text</p>
      </div>
      <div class="flex-item">
        <h2>Text</h2>
        <p>Text</p>
      </div>
      <figure class="flex-item"><img src="materiale/junckers.png" alt="junckers"></figure>
      <figure class="flex-item"><img src="materiale/byg-garanti.png" alt="byg-garanti"></figure>
      <figure class="flex-item"><img src="materiale/gulvbranchen.png" alt="gulvbranchen"></figure>
    </div>

我希望前两个弹性项目（两个 div 的）填充一行并根据 justify-content: space-between; 对齐；我希望最后三个弹性项目（三个数字）填充下一行并根据 justify-content: space-evenly;

对齐

在同一个 flex-container 中可以吗？

Answer 1

答案是否。

在grid中，有justify-self属性这句话是正确的。但是，从 2022 年 5 月起，flex 不支持这种样式。

flex 确实支持 align-self 在 y-axis (align-items) 上对齐弹性项目，但不支持 x-axis (justify-content).

好消息。

您仍然可以在样式表中复制这些样式，但必须手动完成。您可以针对第一个和第二个 flex-item 并使用 width: calc(100%/2) 作为前两个您希望各占 50% 的弹性项目。然后您可以将 flex-wrap: wrap 添加到 flex-container 上，这样图像 flex-items 就会换行。然后你可以通过将 margin: auto; 添加到相应的 flex-items.

来复制 justify-content: space-between;

见下文：

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item:first-child,
.flex-item:nth-child(2) {
  width: calc(100%/2);
  outline: dotted 1px black;
}

.flex-item:nth-child(3),
.flex-item:nth-child(4),
.flex-item:nth-child(5) {
  outline: solid 1px;
  background: orange;
  padding: 10px;
}

<div class="wrapper flex-container">
  <div class="flex-item">
    <h2>Text</h2>
    <p>Text</p>
  </div>
  <div class="flex-item">
    <h2>Text</h2>
    <p>Text</p>
  </div>
  <figure class="flex-item" style="margin-right: auto;"><img src="https://dummyimage.com/100/000/fff" alt="junckers"></figure>
  <figure class="flex-item" style="margin: auto;"><img src="https://dummyimage.com/100/000/fff" alt="byg-garanti"></figure>
  <figure class="flex-item" style="margin-left: auto;"><img src="https://dummyimage.com/100/000/fff" alt="gulvbranchen"></figure>
</div>

有没有办法为 flexbox 容器内的不同行设置不同的 justify-content 值？

Is there a way to have different justify-content values for different rows inside a flexbox-container?

html

css

alignment

flexbox