Flexbox水平对齐项目[重复]答案

【问题标题】：Flexbox align items horizontally [duplicate]Flexbox水平对齐项目[重复]
【发布时间】：2017-03-27 02:57:29
【问题描述】：

有没有一种方法可以以这种方式对齐子项：[i][i]______[i][i][i]，不管每个组中有多少项？

【问题讨论】：

【解决方案1】：

在 Flexbox 容器中

使用justify-content水平对齐项目。
使用align-items垂直对齐项目。

看看下面的示例 sn-p：

.parent {
  display: flex;
  width: 100%;
  height: 100px;
  align-items: center; /* Align Items Vertically */
  justify-content: space-between; /* Align Items Horizontally (with equal space in between each of them */
  background: #eee;
}

.children {
  display: flex;
}

.child {
  margin: 0 5px;
  padding: 0 5px;
  font-size: 30px;
  background: #ccc;
  color: #000;
}

<div class="parent">
  <div class="children left-children">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
  </div>
  <div class="children right-children">
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
  </div>
</div>

希望这会有所帮助！

【讨论】：

@DmitryMosquid 你的意思是[i][i]______[i][i][i]，它们之间应该有空格吗？
是的，我必须像 float:left 和 float:right 一样工作，但需要显示 flex..
@DmitryMosquid 为了实现这一点，您需要创建 2 个 .children 元素并将 child 放入其中（左右）并使用 justify-content: space-between; 将它们分开。仅供参考 - Float 属性不适用于 Flexbox。我已经更新了我的答案，请看一下。如果有帮助，请告诉我！
非常感谢。
这是我的荣幸！

【解决方案2】：

把左右孩子放在一个div里，这样给左右

<div class="parent">
  <div class="left">
     <div class="child">1</div>
     <div class="child">2</div>
  </div>
  <div class="right">

    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
  </div>
</div>

并给出这个 css

.parent {
     display: flex;
  width: 100%;
  height: 100px;
  justify-content: space-between; /* Align Items Horizontally */
  background: #eee;
}

.child {
  margin: 0 5px;
  padding: 0 5px;
  font-size: 30px;
  background: #ccc;
  color: #000;
}

【讨论】：