CSS Flexbox 布局是一种强大的布局方式，它可以轻松地实现复杂的布局效果，而不需要使用传统的 float、position、table 等方式。本文将从基础到实战，详细介绍 CSS Flexbox 布局的所有知识点，帮助你掌握这种强大的布局方式。
什么是 Flexbox 布局
Flexbox 布局是一种用于页面布局的 CSS 模块，它提供了一种更加灵活的方式来布置元素。通过使用 Flexbox 布局，我们可以轻松地实现多列布局、垂直居中、等高布局等效果。
入门基础
在使用 Flexbox 布局之前，我们需要了解一些基础知识：
Flex Container 和 Flex Item
在 Flexbox 布局中，元素可以分为两类：
- Flex Container：定义了一个 Flexbox 容器，用来包含一组 Flex Item。
- Flex Item：定义了 Flexbox 容器中的每一个子元素。
Flexbox 容器的属性
Flexbox 容器有以下常用属性：
- display：定义 Flexbox 容器的类型，默认值为
flex。 - flex-direction：定义 Flexbox 容器的主轴方向，默认值为
row。 - justify-content：定义 Flexbox 容器中 Flex Item 在主轴上的对齐方式。
- align-items：定义 Flexbox 容器中 Flex Item 在交叉轴上的对齐方式。
- flex-wrap：定义 Flexbox 容器中 Flex Item 的换行方式，默认值为
nowrap。 - align-content：定义多行 Flexbox 容器中 Flex Item 的对齐方式。
Flex Item 的属性
Flex Item 有以下常用属性：
- flex：定义 Flex Item 的放大比例。
- order：定义 Flex Item 的排列顺序。
- align-self：定义 Flex Item 在交叉轴上的对齐方式。
实战应用
水平居中
让一个元素在它的父元素中水平居中，可以使用以下代码：
------- - -------- ----- ---------------- ------- -
垂直居中
让一个元素在它的父元素中垂直居中，可以使用以下代码：
------- - -------- ----- ------------ ------- -
等高布局
让一个 Flex Container 中的所有 Flex Item 高度相等，可以使用以下代码：
------- - -------- ----- ---------- ----- - ------ - ----- -- -
自适应布局
让一个 Flex Container 中的所有 Flex Item 自适应宽度，可以使用以下代码：
------- - -------- ----- - ------ - ----- -- -
多行布局
让一个 Flex Container 中的 Flex Item 换行，可以使用以下代码：
------- - -------- ----- ---------- ----- - ------ - ----- -- -
总结
本文介绍了 CSS Flexbox 布局的所有知识点，从基础到实战，详细介绍了 Flex Container 和 Flex Item、Flexbox 容器和 Flex Item 的属性、以及实战应用场景。通过学习本文，相信你已经掌握了 CSS Flexbox 布局的使用方法，可以轻松地实现多种复杂的布局效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66390956d3423812e47238b8