Question

是否有一种方法以这种方式对齐子项：[i] [i] ______ [i] [i] [i]，无论每个组中有多少项？

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>

希望这有帮助！

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

Flexbox水平对齐项目

2 个答案: