如何在Flexbox中沿交叉轴拉伸并居中元素？

问题描述 #

需要实现Flexbox布局中元素的以下行为：

• 条件允许时，元素填满容器内的可用空间
• 当元素受max-width/max-height限制无法填满时，自动居中

当前代码主轴方向符合预期，但交叉轴存在矛盾：

• 使用align-items: center时，元素居中但尺寸仅为最小值
• 使用align-items: stretch时，元素尺寸拉到最大但无法居中

要求：不添加额外HTML元素。

原代码示例 #

CSS #

.container {
  background: blue;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* align-items: stretch; */
}

.item {
  flex: 1;
  background: red;
  min-width: 20px;
  min-height: 20px;
  max-width: 100px;
  max-height: 100px;
}

HTML #

<div class="container">
  <div class="item"></div>
</div>

解决方案 #

通过给子元素设置align-self: stretch和margin: auto，可以同时满足两种场景的需求：

修改后的CSS #

.container {
  background: blue;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center;
}

.item {
  flex: 1;
  background: red;
  min-width: 20px;
  min-height: 20px;
  max-width: 100px;
  max-height: 100px;
  align-self: stretch; /* 让元素在交叉轴尽可能拉伸 */
  margin: auto; /* 受max限制时自动分配剩余空间实现居中 */
}

原理说明 #

1. align-self: stretch：强制子元素在交叉轴方向尽可能占据容器的可用空间，优先满足「填满可用空间」的需求
2. margin: auto：当子元素被max-width/max-height限制，无法占满容器空间时，margin: auto会自动在元素的上下/左右分配剩余空间，从而实现居中效果；当元素可以填满容器时，该属性不会产生额外间距，不影响拉伸效果

内容的提问来源于stack exchange，提问作者yuri kilochek