CSS 弹性盒模型

弹性盒模型（Flexbox）是CSS3中引入的一种一维布局模型，用于在容器内灵活地分配空间和对齐元素。Flexbox使得创建响应式布局变得更加容易。

基本概念

1. Flex容器（Flex Container）

通过设置display: flex或display: inline-flex将元素转换为Flex容器：

css 
.container {
  display: flex; /* 块级Flex容器 */
  /* 或 */
  display: inline-flex; /* 行内Flex容器 */
}

2. Flex项目（Flex Items）

Flex容器内的直接子元素称为Flex项目：

html 
<div class="container">
  <div class="item">项目1</div> <!-- Flex项目 -->
  <div class="item">项目2</div> <!-- Flex项目 -->
  <div class="item">项目3</div> <!-- Flex项目 -->
</div>

容器属性

1. flex-direction

flex-direction属性定义了Flex容器的主轴方向：

css 
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
  • row（默认）：主轴为水平方向，项目从左到右排列
  • row-reverse：主轴为水平方向，项目从右到左排列
  • column：主轴为垂直方向，项目从上到下排列
  • column-reverse：主轴为垂直方向，项目从下到上排列

2. flex-wrap

flex-wrap属性定义了项目是否换行：

css 
.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
  • nowrap（默认）：不换行，项目可能会溢出容器
  • wrap：换行，项目从上到下排列
  • wrap-reverse：换行，项目从下到上排列

3. flex-flow

flex-flow是flex-direction和flex-wrap的简写：

css 
.container {
  flex-flow: <flex-direction> <flex-wrap>;
}

例如：

css 
.container {
  flex-flow: row wrap;
}

4. justify-content

justify-content属性定义了项目在主轴上的对齐方式：

css 
.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
  • flex-start（默认）：项目从主轴起点对齐
  • flex-end：项目从主轴终点对齐
  • center：项目在主轴上居中对齐
  • space-between：项目之间的间距相等，两端对齐
  • space-around：每个项目两侧的间距相等，项目之间的间距是项目与容器边缘间距的两倍
  • space-evenly：项目之间的间距和项目与容器边缘的间距都相等

5. align-items

align-items属性定义了项目在交叉轴上的对齐方式：

css 
.container {
  align-items: stretch | flex-start | flex-end | center | baseline;
}
  • stretch（默认）：项目拉伸以填充容器的交叉轴方向
  • flex-start：项目从交叉轴起点对齐
  • flex-end：项目从交叉轴终点对齐
  • center：项目在交叉轴上居中对齐
  • baseline：项目以基线对齐

6. align-content

align-content属性定义了多行项目在交叉轴上的对齐方式（仅当项目换行时有效）：

css 
.container {
  align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}
  • stretch（默认）：多行拉伸以填充容器的交叉轴方向
  • flex-start：多行从交叉轴起点对齐
  • flex-end：多行从交叉轴终点对齐
  • center：多行在交叉轴上居中对齐
  • space-between：多行之间的间距相等，两端对齐
  • space-around：每行两侧的间距相等，行之间的间距是行与容器边缘间距的两倍

项目属性

1. order

order属性定义了项目的排列顺序，数值越小，排列越靠前：

css 
.item {
  order: <整数>; /* 默认值为0 */
}

2. flex-grow

flex-grow属性定义了项目的放大比例，默认值为0，即不放大：

css 
.item {
  flex-grow: <数值>; /* 默认值为0 */
}

如果所有项目的flex-grow值都为1，则它们将等分剩余空间。如果一个项目的flex-grow值为2，其他项目为1，则该项目占据的剩余空间是其他项目的两倍。

3. flex-shrink

flex-shrink属性定义了项目的缩小比例，默认值为1，即当空间不足时，项目会缩小：

css 
.item {
  flex-shrink: <数值>; /* 默认值为1 */
}

如果所有项目的flex-shrink值都为1，当空间不足时，它们将等比例缩小。如果一个项目的flex-shrink值为0，其他项目为1，则当空间不足时，该项目不会缩小。

4. flex-basis

flex-basis属性定义了项目在主轴上的初始大小：

css 
.item {
  flex-basis: <长度> | auto; /* 默认值为auto */
}
  • <长度>：可以是px、em、%等
  • auto（默认）：项目的大小由其内容决定

5. flex

flex是flex-grow、flex-shrink和flex-basis的简写：

css 
.item {
  flex: <flex-grow> <flex-shrink> <flex-basis>;
}

常用的简写方式：

  • flex: 1：等同于flex: 1 1 0%
  • flex: auto：等同于flex: 1 1 auto
  • flex: none：等同于flex: 0 0 auto

6. align-self

align-self属性定义了单个项目在交叉轴上的对齐方式，覆盖容器的align-items属性：

css 
.item {
  align-self: auto | stretch | flex-start | flex-end | center | baseline;
}
  • auto（默认）：继承容器的align-items属性
  • 其他值与align-items属性相同

应用场景

1. 水平居中

html 
<div class="container" style="display: flex; justify-content: center;">
  <div class="item">居中内容</div>
</div>

2. 垂直居中

html 
<div class="container" style="display: flex; align-items: center; height: 300px;">
  <div class="item">垂直居中内容</div>
</div>

3. 水平垂直居中

html 
<div class="container" style="display: flex; justify-content: center; align-items: center; height: 300px;">
  <div class="item">水平垂直居中内容</div>
</div>

4. 两列布局

html 
<div class="container" style="display: flex;">
  <div class="sidebar" style="width: 250px;">侧边栏</div>
  <div class="main" style="flex: 1;">主要内容</div>
</div>

5. 三列布局（中间自适应）

html 
<div class="container" style="display: flex;">
  <div class="left" style="width: 200px;">左侧栏</div>
  <div class="center" style="flex: 1;">中间内容</div>
  <div class="right" style="width: 200px;">右侧栏</div>
</div>

6. 导航栏

html 
<nav style="display: flex; justify-content: space-between; background-color: #333; color: white;">
  <div class="logo">Logo</div>
  <ul style="display: flex; list-style: none;">
    <li style="margin-right: 20px;"><a href="#">首页</a></li>
    <li style="margin-right: 20px;"><a href="#">关于我们</a></li>
    <li style="margin-right: 20px;"><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

7. 卡片布局

html 
<div class="card-container" style="display: flex; flex-wrap: wrap; justify-content: space-between;">
  <div class="card" style="width: 30%; margin-bottom: 20px;">卡片1</div>
  <div class="card" style="width: 30%; margin-bottom: 20px;">卡片2</div>
  <div class="card" style="width: 30%; margin-bottom: 20px;">卡片3</div>
  <div class="card" style="width: 30%; margin-bottom: 20px;">卡片4</div>
  <div class="card" style="width: 30%; margin-bottom: 20px;">卡片5</div>
  <div class="card" style="width: 30%; margin-bottom: 20px;">卡片6</div>
</div>

注意事项

  1. 一维布局：Flexbox是一维布局模型，主要用于处理行或列的布局，不适用于复杂的二维布局（可以考虑使用Grid）。

  2. 浏览器兼容性：Flexbox在现代浏览器中支持良好，但在一些旧版本浏览器中支持有限，需要考虑降级方案。

  3. 性能影响：Flexbox布局通常比传统布局技术（如浮动和定位）性能更好，但过多的嵌套Flex容器可能会影响性能。

  4. 方向切换：通过flex-direction可以轻松切换布局方向，这对于响应式设计非常有用。

  5. 空间分配：Flexbox自动处理空间分配，不需要手动计算百分比，减少了布局错误。

浏览器兼容性

浏览器 版本 支持情况
Chrome 29+ 完全支持
Firefox 28+ 完全支持
Safari 9+ 完全支持
Edge 12+ 完全支持
IE 11 部分支持（需要前缀）

总结

Flexbox是一种强大的一维布局模型，它使得创建灵活的响应式布局变得更加容易。通过容器属性和项目属性的组合，可以实现各种复杂的布局效果。Flexbox特别适用于导航栏、卡片布局、居中对齐等常见的UI模式。在现代Web开发中，Flexbox已经成为布局的首选技术之一。

最后更新：2026-02-07