Flexbox 将几个项目左对齐，几个项目居中，几个项目右对齐 - 顺序应该是可变的

Question

我需要针对以下情况的 CSS 解决方案：

我有一个 header 和几个 children，比如说四个。并非所有四个 children 都具有相同的宽度。项目默认左对齐。我使用 margin-left and/or margin-right 自动将项目与 center/right 对齐。我用 CSS order 属性.

更改了项目的顺序

现在我想将项目对齐到容器的左侧、中间和右侧。 children 的顺序应该在视口上改变（使用 @media 查询）。

如何在不同的视口宽度中将未指定数量的项目居中到左侧、中心和右侧？

我的（简体）HTML

<div class="header-container">

 <div class="first-child">
 </div>
 <div class="second-child">
 </div>
 <div class="third-child">
 </div>
 <div class="fourth-child">
 </div>

</div>

我也把我的简化情况放在了this JSFiddle。

视口外观的具体示例

@media (max-width: 799px) {*

 left: first-child and second-child

 center: third-child

 right: fourth-child

}

@media (max-width: 800px) and (max-width: 1319px) {

 left: third-child

 center: first-child and second-child

 right: fourth-child

}

@media (min-width: 1320px) {

 left: first-child

 center: third-child

 right: second-child

 fourth-child - display: none;

}

Answer 1

首先，您必须将孩子分组，例如在中间：

<div class="grouped-items">
  <div class="second-child">
  </div>
  <div class="third-child">
  </div>
</div>

之后，您将拥有三组项目或单独的项目。使用 justify-content: space-between

看起来像这样（在整页中打开以查看最佳结果）：

.header-container {
  width: 100%;
  height: 68px;
  background-color: white;
  display: flex;
  justify-content: space-between;
}


/* Set display: flex so they will act same as if they weren't in another div */

.grouped-items {
  display: flex;
}

.first-child {
  width: 60px;
  height: 100%;
  background-color: red;
}

.second-child {
  width: 80px;
  height: 100%;
  background-color: green;
}

.third-child {
  width: 50px;
  height: 100%;
  background-color: blue;
}

.fourth-child {
  width: 100px;
  height: 100%;
  background-color: black;
}

@media (max-width: 799px) {
  .grouped-items {
    order: 1;
  }
  .third-child {
    order: 2;
  }
  .fourth-child {
    order: 3;
  }
}

@media (min-width: 800px) and (max-width: 1319px) {
  .grouped-items {
    order: 2;
  }
  .third-child {
    order: 1;
  }
  .fourth-child {
    order: 3;
  }
}

@media (min-width: 1320px) {
  .fourth-child {
    display: none;
  }

  .grouped-items {
    order: 2;
  }
  .third-child {
    order: 1;
  }
}

body {
  background-color: grey;
  margin: 0;
}

<div class="header-container">

  <div class="grouped-items">
    <div class="first-child">
    </div>
    <div class="second-child">
    </div>
  </div>

  <div class="third-child">
  </div>

  <div class="fourth-child">
  </div>

</div>

要更改媒体顺序，只需使用 order

Flexbox 将几个项目左对齐，几个项目居中，几个项目右对齐 - 顺序应该是可变的

Flexbox align several items to left, several to the center and several to the right - order should be changeable

css

alignment

flexbox