CSS flex 三栏-中间元素自动最大宽度或高度

HenryZ 2024-02-21 更新于 2024-06-17

使用 flex 布局，两端元素默认内容宽度，中间元素自动扩充到最大宽度。
|left| <- center -> |right|

HTML

<div class="h">
 <div class="left">左/上</div>
 <div class="middle">中</div>
 <div class="right">右/下</div>
</div>

<br />

<div class="v">
 <div class="left">左/上</div>
 <div class="middle">中</div>
 <div class="right">右/下</div>
</div>

CSS

div {
  border: 1px solid #ccc;
}

.h {
  /* 水平/横向 */
  display: flex;
  flex-direction: row;
}

.v {
  /* 垂直/纵向 */
  display: flex;
  flex-direction: column;
  height: 300px; /* 需要设置固定高度 */
}

.middle {
  flex: 1 1 auto; /* flex-grow | flex-shrink | flex-basis */
  align-items: center; /* 元素水平居中 */
  text-align: center; /* 文本水平居中 */
  align-content: center; /* 元素垂直居中 */
}
.left,
.right {
  /* nothing */
}