在flex容器中将项目右对齐

sonnyk2016 发表于 Dev

sonnyk2016

我有一个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 { }

乔纳森·林

因为似乎您在一行中有两列，所以我建议您在这种情况下使用三个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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。