使用flexbox将特定元素集中在其他元素中

Question

我有一个在flexbox中有三个元素的布局，如下所示：

func drawRectOn(image: UIImage) -> UIImage {
    UIGraphicsBeginImageContext(image.size)
    image.draw(at: CGPoint.zero)
    let context = UIGraphicsGetCurrentContext()

    // set fill gray and alpha
    context!.setFillColor(gray: 0, alpha: 0.5)
    context!.move(to: CGPoint(x: 0, y: 0))
    context!.fill(CGRect(x: 0, y: 0, width: image.size.width, height: image.size.height))
    context!.strokePath()
    let resultImage = UIGraphicsGetImageFromCurrentImageContext()

    // end the graphics context
    UIGraphicsEndImageContext()

    return resultImage!

}

我想将中间项.flex-container { display: flex; justify-content: space-between; align-items: center; } <div class="flex-container"> <div class="flex-item"> computed width of 50px </div> <div class="flex-item plz-center"> computed width of 25px </div> <div class="flex-item"> computed width of 150px </div> </div> 居中，让其他项目保持在两边，如下图所示：

它们在弹性行中工作正常，但如果最终项目的宽度不同，则中间项目不会保持居中。我最好修复plz-center吗？

Answer 1

这个问题的一个简单解决方案就是给你的第一个方框margin-right:auto和你的最后一个方框margin-left:auto，灵活方框将整理其余方框并计算间距对你而言。

网站在构建网格系统时经常使用的一个更复杂的解决方案，就是将这些flex-items中的每一个都包装在另一个也是弹性框的DIV中。然后使这些新的柔性盒平均分享主包装柔性盒的宽度（宽度的1/3到每个）。然后在每个盒子里面，您可以根据需要定位元素。这是一个例子（我在新的包装柔性盒周围留下了黑色边框，这样你就可以更好地了解它的行为）：

body {
  margin: 0;
}
.flex-container {
  display: flex;
  align-items: center;
}
.flex1,
.flex2,
.flex3 {
  display: flex;
  flex: 1 1 0;
  border: 1px solid black;
}
.flex2 {
  justify-content: space-around;
}
.flex3 {
  justify-content: flex-end;
}
.flex-item {
  width: 50px;
  height: 50px;
  background: orange;
}
.flex-item.plz-center {
  width: 25px;
}
.flex-item.big {
  width: 150px;
}

<div class="flex-container">
  <div class="flex1">
    <div class="flex-item"></div>
  </div>
  <div class="flex2">
    <div class="flex-item plz-center"></div>
  </div>
  <div class="flex3">
    <div class="flex-item big"></div>
  </div>
</div>