html - 右对齐 flex 容器中的元素

Question

我有一个 div 容器(黑色轮廓)，其中包含 4 个等长和等高的 div。

我希望 4 个彩色 div 右对齐，它们之间的间距相等(假设每个彩色 div 约为容器高度的 49.5%，每个 div 的宽度约为容器的 25%)。

我试着用 flex 来做这个，但我没有得到我想要的。

有人可以帮帮我吗？非常感谢你提前。

<div class="container">
  <div class="blue"></div>
  <div class="red"></div>
  <div class="purple"></div>
  <div class="green"></div>    
</div>

.container { }
.blue { }
.red { }
.purple { }
.green { }

Answer 1

因为看起来你在一行中有两列，所以我建议你在这种情况下使用三个 flexbox。

这是它的工作原理:

.container (outer flexbox, flex-direction: row)
-------------------------------------------------------------------
|   .innerContainer   |   .innerContainer   |   .innerContainer   |
-------------------------------------------------------------------

.innerContainer (inner flexbox, flex-direction: column)
---------------   ---------------   --------------
|   (empty)   |   |    .blue    |   |    .red    |
---------------   |   .purple   |   |   .green   |
                  ---------------   --------------

此外，所有 flex-box 子项都设置为 flex-grow: 1，这样它们的尺寸都相等，并且它们会填满整个空间。

.container {
  display: flex;
  flex-direction: row;
  background-color: #e9e9e9;
  height: 100px;
}
.innerContainer {
  display: flex;
  flex-direction: column;
}
.blue, .red, .purple, .green, .innerContainer {
  flex-grow: 1;
  margin: 2px 1px;
}
.blue {
  background-color: blue;
}
.red {
  background-color: red;
}
.purple {
  background-color: purple;
}
.green {
  background-color: green;
}

<div class="container">
  <div class="innerContainer"></div>
  <div class="innerContainer">
    <div class="blue"></div>
    <div class="purple"></div>
  </div>
  <div class="innerContainer">
    <div class="red"></div>
    <div class="green"></div>
  </div>
</div>