css3 display:flex 弹性盒模型的使用方法

CSS3 中的 display: flex 是一种强大的布局模式，被称为“弹性盒布局”或“Flexbox”。它允许我们通过一套简洁的规则，轻松地对网页元素进行对齐、排列和分布，不论这些元素的大小、排列方向如何。它主要解决了传统布局方法中遇到的一些问题，如元素对齐、间距分配以及自适应布局等。下面是对 display: flex 的一些关键概念和使用方法的详细介绍。

1. 基本概念：

display: flex 会把容器的子元素（即直接子元素）变为弹性盒子项（flex items），并且根据定义的规则来对这些子元素进行排列和布局。弹性布局主要由两个方面组成：

• 容器（Flex Container）：是使用 display: flex 或 display: inline-flex 的元素，包含了需要排列的子元素。
• 项（Flex Items）：是容器的直接子元素，所有的排列、对齐规则都是作用在这些项上的。

2. 常见的 Flexbox 属性：

2.1 容器上的属性：

• display: flex：将元素设为弹性盒容器，默认排列方式为水平方向（从左到右）。
• flex-direction：定义主轴（items 排列的方向），可选值：
  • row：水平方向（默认）。
  • row-reverse：水平方向，反向排列。
  • column：垂直方向。
  • column-reverse：垂直方向，反向排列。

1 2 3 4

.container {     display: flex;     flex-direction: row; }

• flex-wrap：控制项目是否换行。默认情况下，所有项会尝试在一行内显示，设置为 wrap 可以使它们在空间不足时换行。
  • nowrap（默认）：不换行。
  • wrap：换行。
  • wrap-reverse：反向换行。

1 2 3 4

.container {     display: flex;     flex-wrap: wrap; }

• justify-content：定义主轴方向上的对齐方式，控制各个子项之间的间距分布。
  • flex-start（默认）：靠左对齐（或顶部对齐，如果主轴是垂直的）。
  • flex-end：靠右对齐（或底部对齐）。
  • center：居中对齐。
  • space-between：项之间有相等的间距，首尾项紧贴容器边缘。
  • space-around：项之间有相等的间距，首尾项有一半的间距。
  • space-evenly：项之间的间距相等，包括首尾项。

1 2 3 4

.container {     display: flex;     justify-content: center; }

• align-items：控制交叉轴（垂直方向）上项目的对齐方式。此属性用于对容器内的所有项目进行垂直对齐。
  • flex-start：顶部对齐。
  • flex-end：底部对齐。
  • center：居中对齐。
  • baseline：基线对齐。
  • stretch（默认）：拉伸使所有项填满容器的高度。

1 2 3 4

.container {     display: flex;     align-items: center; }

• align-content：类似于 justify-content，但它是控制多行内容的对齐方式，只有在 flex-wrap: wrap 时才有意义。
  • flex-start：顶部对齐。
  • flex-end：底部对齐。
  • center：居中对齐。
  • space-between：项之间有相等的间距，首尾项紧贴容器边缘。
  • space-around：项之间有相等的间距，首尾项有一半的间距。
  • stretch（默认）：拉伸填充容器。

1 2 3 4 5

.container {     display: flex;     flex-wrap: wrap;     align-content: center; }

2.2 项目上的属性：

flex-grow：定义项如何在主轴方向上扩展，以填充容器的剩余空间。默认值为 0，即不扩展。

1 2 3

.item {     flex-grow: 1;  /* 占据所有剩余空间 */ }

flex-shrink：定义项如何在主轴方向上收缩，默认为 1，即在空间不足时收缩。

1 2 3

.item {     flex-shrink: 1;  /* 收缩 */ }

flex-basis：定义项的初始大小，默认值为 auto，即根据内容的大小决定。如果指定了大小，项会基于此大小进行分配。

1 2 3

.item {     flex-basis: 200px;  /* 初始大小为 200px */ }

flex：简写属性，它是 flex-grow、flex-shrink 和 flex-basis 的组合。默认值为 0 1 auto。

1 2 3

.item {     flex: 1;  /* 等同于 flex-grow: 1; flex-shrink: 1; flex-basis: 0; */ }

align-self：允许单个项目覆盖 align-items 设置进行自定义对齐。可以用来在交叉轴上单独控制某个子项的对齐方式。

1 2 3

.item {     align-self: center;  /* 项目在交叉轴上居中 */ }

3. Flexbox 布局模型的优点：

• 响应式设计：Flexbox 使得元素可以在容器内灵活地调整大小和位置，适应不同的屏幕尺寸和设备。
• 对齐和间距：通过 justify-content、align-items 和 align-self 等属性，可以非常方便地进行对齐、分布和间距管理。
• 简化布局：可以省去很多传统布局中的定位（position）、浮动（float）以及清除浮动（clear）等复杂操作，代码简洁清晰。
• 灵活性：无论是水平排列还是垂直排列，Flexbox 都能轻松实现，并且支持动态调整。

4. 应用场景：

• 导航条：使用 display: flex 可以轻松实现水平或垂直排列的导航栏。
• 居中对齐：Flexbox 可以方便地实现水平和垂直的完全居中对齐。
• 自适应布局：对于响应式设计，Flexbox 允许元素在不同尺寸的屏幕下根据可用空间自动调整布局。
• 多行布局：在需要处理多个元素行时，使用 flex-wrap 可以让元素自动换行，保证布局灵活性。