Flexbox（弹性盒布局）是一种 CSS 布局模型，用于设计和布局复杂的网页布局，尤其是在响应式设计中非常有用。它使得容器中的子元素可以灵活地排列和对齐，即使在不同的屏幕尺寸和容器大小下也能保持一致的布局。

Flexbox 的基本概念

  1. Flex容器（Flex Container）：这是你要应用 Flexbox 布局的父元素。通过设置 display: flex; 或 display: inline-flex;，你将一个元素转变为 Flex 容器。
  2. Flex 项目（Flex Items）：这是 Flex 容器中的子元素，自动成为 Flex 项目。

Flexbox 的主要属性

1. Flex 容器的属性

  • display
    • flex：将元素定义为 Flex 容器，启用 Flexbox 布局。
    • inline-flex：将元素定义为内联 Flex 容器，和 inline 元素一样在行内显示。
1
2
3
css复制代码.container {
  display: flex; /* 或 inline-flex */
}

  • flex-direction

    ：定义主轴的方向（即项目排列的方向）。

    • row（默认）：从左到右排列。
    • column：从上到下排列。
    • row-reverse：从右到左排列。
    • column-reverse：从下到上排列。
1
2
3
css复制代码.container {
  flex-direction: row; /* 或 column, row-reverse, column-reverse */
}

  • flex-wrap

    ：定义 Flex 项目是否换行。

    • nowrap（默认）：不换行。
    • wrap：换行。
    • wrap-reverse：反向换行。
1
2
3
css复制代码.container {
  flex-wrap: wrap; /* 或 nowrap, wrap-reverse */
}
  • **flex-flow**：简写属性，用于设置 flex-direction 和 flex-wrap。
1
2
3
css复制代码.container {
  flex-flow: row wrap; /* row / column 和 nowrap / wrap */
}

  • justify-content

    ：定义主轴上项目的对齐方式。

    • flex-start（默认）：对齐到主轴的开始位置。
    • center：对齐到主轴的中心。
    • flex-end：对齐到主轴的结束位置。
    • space-between：项目之间留有均匀的间隔。
    • space-around：项目周围有均匀的间隔。
    • space-evenly：项目之间和项目与容器边缘的间隔均匀。
1
2
3
css复制代码.container {
  justify-content: center; /* 或 flex-start, flex-end, space-between, space-around, space-evenly */
}

  • align-items

    ：定义交叉轴（主轴的垂直方向）上项目的对齐方式。

    • stretch（默认）：项目被拉伸以填充容器。
    • flex-start：对齐到交叉轴的开始位置。
    • center：对齐到交叉轴的中心。
    • flex-end：对齐到交叉轴的结束位置。
    • baseline：项目的文本基线对齐。
1
2
3
css复制代码.container {
  align-items: center; /* 或 stretch, flex-start, flex-end, baseline */
}

  • align-content

    ：定义多行（如果有的话）之间的对齐方式。

    • stretch（默认）：行之间拉伸以填充容器。
    • flex-start：对齐到交叉轴的开始位置。
    • center：对齐到交叉轴的中心。
    • flex-end：对齐到交叉轴的结束位置。
    • space-between：行之间留有均匀的间隔。
    • space-around：行周围有均匀的间隔。
    • space-evenly：行之间和行与容器边缘的间隔均匀。
1
2
3
css复制代码.container {
  align-content: center; /* 或 stretch, flex-start, flex-end, space-between, space-around, space-evenly */
}

  • align-items

    和

    align-content

    的区别：

    • align-items 是用来对齐单行项目。
    • align-content 是用来对齐多行项目。

2. Flex 项目的属性

  • flex-grow

    ：定义项目的放大比例。默认为 0，即项目不放大。

    • 值为 1 表示项目会填充剩余空间。
1
2
3
css复制代码.item {
  flex-grow: 1; /* 项目会填充剩余空间 */
}

  • flex-shrink

    ：定义项目的缩小比例。默认为 1，即项目会缩小以适应容器。

    • 值为 0 表示项目不会缩小。
1
2
3
css复制代码.item {
  flex-shrink: 1; /* 项目会缩小 */
}

  • flex-basis

    ：定义在分配多余空间之前，项目占据的初始空间。默认值为 

    1
    auto

    。

    • 可以设置具体的像素值或百分比。
1
2
3
css复制代码.item {
  flex-basis: 200px; /* 项目初始占据 200px 的空间 */
}

  • flex

    ：简写属性，用于设置 

    1
    flex-grow

    、

    1
    flex-shrink

    和 

    1
    flex-basis

    。

    • 例如：flex: 1 0 200px; 相当于设置 flex-grow 为 1，flex-shrink 为 0，flex-basis 为 200px。
1
2
3
css复制代码.item {
  flex: 1 0 200px; /* 等价于 flex-grow: 1; flex-shrink: 0; flex-basis: 200px; */
}

  • align-self

    ：允许单个项目在交叉轴上的对齐方式不同于其他项目。

    • 取值和 align-items 类似：auto, flex-start, center, flex-end, baseline, stretch。
1
2
3
css复制代码.item {
  align-self: center; /* 该项目在交叉轴上居中对齐 */
}

Flexbox 实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
html复制代码<div class="container">
  <div class="item">项 1</div>
  <div class="item">项 2</div>
  <div class="item">项 3</div>
</div>
css复制代码.container {
  display: flex;
  flex-direction: row; /* 项目在一行中显示 */
  justify-content: space-between; /* 项目之间有均匀的间隔 */
  align-items: center; /* 项目在交叉轴上居中对齐 */
}

.item {
  flex: 1; /* 项目会填充剩余空间 */
  margin: 5px; /* 项目之间的间隔 */
}