时间戳

首页 > 解决方案 > 当 flex-direction 为列时如何对齐和拉伸孩子？

html - 当 flex-direction 为列时如何对齐和拉伸孩子？

问题描述

我想将孩子们居中对齐在一个 flex 容器内，并且它们也会拉伸。此外，孩子们有一个最大宽度。他们为什么不拉伸？

jsfiddle

.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box {
  max-width: 500px;
  border: solid;
  text-align: center;
  margin-bottom: 20px;
  padding: 20px;
}
<div class="wrap">
  <div class="box">
    Hello world
  </div>
  <div class="box">
    Hello universe
  </div>
</div>

标签： htmlcssflexbox

解决方案

如果您使用 max-width 框将保持文本的宽度在里面 + paddings + margins。如果您希望孩子具有相同的宽度，则必须设置

min-width && max-width

所以孩子们将被固定为500px

解决方案 2：给“包装”容器这些规则

width:500px; align-items: stretch;

盒子将按其容器的尺寸拉伸。此外，如果您想使容器居中，您可以添加

margin: 0 auto;

“包装”类。

推荐阅读