当前位置：首页 > article >正文

css 关于flex布局中子元素的属性flex

article 2025/1/7 19:46:08

css flex布局中子元素的属性flex

1. `flex` 是 `flex-grow`、`flex-shrink` 和 `flex-basis` 的简写

语法格式：

flex: [flex-grow] [flex-shrink] [flex-basis];

各属性解析：

flex-grow: 子元素如何按比例分配父元素的 剩余空间。

默认值：0（即不分配剩余空间）。
如果设置为 1 或更大值，则子元素会根据此值按比例分配剩余空间。

flex-shrink: 子元素在父容器空间不足时如何按比例收缩。

默认值：1（即允许收缩）。
设置为 0 时，子元素不会收缩。

flex-basis: 子元素在弹性布局中 初始宽度或高度的基准。

默认值：auto（即根据内容、width 或 height 等值决定）。
如果设置为具体数值（如 0px、100px 或百分比 0%、100%），则会覆盖 width 的设置。

2. 常见用法解析

单值写法

flex: 1;

等价于：

flex: 1 1 0%;

表示 flex-grow: 1，flex-shrink: 1，flex-basis: 0%（基准宽度为 0）。

三个值写法

flex: 2 0 100px;

表示

flex-grow: 2：子元素会分配两倍的剩余空间（与其他子元素按比例）。
flex-shrink: 0：子元素不会收缩。
flex-basis: 100px：子元素的基准宽度为 100px。

常用缩写模式

flex: auto

等价于 flex: 1 1 auto。
子元素会按内容大小决定基础宽度（auto），允许增长和收缩。

flex: none

等价于 flex: 0 0 auto。
子元素大小完全由内容决定，不允许增长或收缩。

3. 应用场景

示例 1: 等比例分配剩余空间

<div class="container" style="display: flex;">
  <div class="box1" style="flex: 1;"></div> <!-- 占一份 -->
  <div class="box2" style="flex: 2;"></div> <!-- 占两份 -->
</div>

box1 和 box2 的行为

父元素有剩余空间，box1 占 1 份，box2 占 2 份，按照 1:2 分配。

示例 2: 固定宽度 + 自适应宽度

<div class="container" style="display: flex;">
  <div class="box1" style="flex: 0 0 100px;"></div> <!-- 固定宽度 100px -->
  <div class="box2" style="flex: 1;"></div>         <!-- 剩余空间填充 -->
</div>