Flexbox水平对齐项目

Question

是否有一种方法可以对齐子项，如 [i][i]______[i][i][i]，而不管每个组中有多少项？

- user4377623

Answer 1

在 Flexbox 容器中：

• 使用 justify-content 属性对项目进行水平对齐。
• 使用 align-items 属性对项目进行垂直对齐。

请参考以下示例代码：

.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>

希望这能帮到您！

- Saurav Rastogi

---

@DmitryMosquid 你的意思是 [i][i]______[i][i][i]，它们之间应该有空格吗？ - Saurav Rastogi

是的，我必须像float：left和float：right一样工作，但需要使用display flex。 - user4377623

@DmitryMosquid 为了实现这个目标，您需要创建两个.children元素，并将您的child放在其中（分别放在右边和左边），同时使用justify-content: space-between;来等距分隔它们。请注意，浮动属性不适用于Flexbox。我已经更新了我的答案，请查看一下。如果对您有所帮助，请告诉我！ - Saurav Rastogi

非常感谢您。 - ANUBIS

这是我的荣幸！ - Saurav Rastogi

Answer 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;
}

- No one