前言
在前端开发中，布局是非常重要的一环。而 Flexbox 布局可以帮助我们更加灵活地进行页面布局。本文将从零开始介绍 Flexbox 布局，包括基础概念、属性和示例代码，希望能够帮助读者掌握该技术并应用于实际开发中。
基础概念
Flexbox 布局是指使用 CSS3 中的 Flexible Box 模型来实现页面布局。其主要思想是将容器划分为一个或多个弹性容器，通过设置各个容器的属性来控制容器内部项目的排列方式、对齐方式、间距等。
Flexbox 布局包含两个主要概念：弹性容器和弹性项目。
弹性容器
弹性容器是一个包含弹性项目的父级容器，通过 display: flex 或 display: inline-flex 属性来定义。其中，flex 表示块级弹性容器，inline-flex 表示行内弹性容器。
弹性容器有以下属性：
flex-direction：定义弹性项目的排列方向。默认值为row，表示水平方向；可选值包括row-reverse（水平方向反向）、column（垂直方向）、column-reverse（垂直方向反向）。flex-wrap：定义弹性项目是否换行。默认值为nowrap，表示不换行；可选值包括wrap（换行）、wrap-reverse（反向换行）。flex-flow：flex-direction和flex-wrap的缩写。justify-content：定义弹性项目在主轴上的对齐方式。默认值为flex-start，表示左对齐；可选值包括flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目间间隔相等）、space-around（每个项目两侧间隔相等）。align-items：定义弹性项目在交叉轴上的对齐方式。默认值为stretch，表示拉伸对齐；可选值包括flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐）。align-content：定义多根轴线的对齐方式。默认值为stretch，表示拉伸对齐；可选值包括flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、space-between（两端对齐，轴线间间隔相等）、space-around（每个轴线两侧间隔相等）。
弹性项目
弹性项目是指放置在弹性容器内部的子元素。弹性项目有以下属性：
order：定义弹性项目的排列顺序。默认值为0，表示按照文档流顺序排列；数值越小，排列越靠前。flex-grow：定义弹性项目的放大比例。默认值为0，表示不放大；数值越大，放大的比例越大。flex-shrink：定义弹性项目的缩小比例。默认值为1，表示可以缩小；数值越大，缩小的比例越大。flex-basis：定义弹性项目的基准值。默认值为auto，表示根据项目的内容自动计算；可以设置为固定值或百分比。flex：flex-grow、flex-shrink和flex-basis的缩写。align-self：定义弹性项目在交叉轴上的对齐方式。默认值为auto，表示继承父级容器的align-items属性；可选值包括flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐）、stretch（拉伸对齐）。
属性详解
下面介绍 Flexbox 布局中常用的属性及其用法。
1. flex-direction
flex-direction 定义了弹性项目的排列方向。默认值为 row，表示水平方向。如果设置为 column，则弹性项目会按照垂直方向排列。
---------- - -------- ----- --------------- ------- -- ------ -- -
如果设置为 row-reverse，则弹性项目会按照水平方向反向排列。如果设置为 column-reverse，则弹性项目会按照垂直方向反向排列。
2. justify-content
justify-content 定义了弹性项目在主轴上的对齐方式。默认值为 flex-start，表示左对齐。如果设置为 flex-end，则弹性项目会右对齐。如果设置为 center，则弹性项目会居中对齐。如果设置为 space-between，则弹性项目会两端对齐，项目间间隔相等。如果设置为 space-around，则每个项目两侧间隔相等。
---------- - -------- ----- ---------------- ------- -- ---- -- -
3. align-items
align-items 定义了弹性项目在交叉轴上的对齐方式。默认值为 stretch，表示拉伸对齐。如果设置为 flex-start，则弹性项目会顶部对齐。如果设置为 flex-end，则弹性项目会底部对齐。如果设置为 center，则弹性项目会居中对齐。如果设置为 baseline，则弹性项目会基线对齐。
---------- - -------- ----- ------------ ------- -- ---- -- -
4. flex-wrap
flex-wrap 定义了弹性项目是否换行。默认值为 nowrap，表示不换行。如果设置为 wrap，则弹性项目会换行。如果设置为 wrap-reverse，则弹性项目会反向换行。
---------- - -------- ----- ---------- ----- -- -- -- -
5. align-content
align-content 定义了多根轴线的对齐方式。默认值为 stretch，表示拉伸对齐。如果设置为 flex-start，则多根轴线会顶部对齐。如果设置为 flex-end，则多根轴线会底部对齐。如果设置为 center，则多根轴线会居中对齐。如果设置为 space-between，则多根轴线会两端对齐，轴线间间隔相等。如果设置为 space-around，则每个轴线两侧间隔相等。
---------- - -------- ----- -------------- ------- -- ---- -- -
6. order
order 定义了弹性项目的排列顺序。默认值为 0，表示按照文档流顺序排列。可以设置为正整数或负整数，数值越小排列越靠前。
----- - ------ -- -- -------- -- -
7. flex-grow
flex-grow 定义了弹性项目的放大比例。默认值为 0，表示不放大。可以设置为正整数，数值越大放大的比例越大。
----- - ---------- -- -- ----- - -- -
8. flex-shrink
flex-shrink 定义了弹性项目的缩小比例。默认值为 1，表示可以缩小。可以设置为正整数，数值越大缩小的比例越大。
----- - ------------ -- -- ----- - -- -
9. flex-basis
flex-basis 定义了弹性项目的基准值。默认值为 auto，表示根据项目的内容自动计算。可以设置为固定值或百分比。
----- - ----------- ------ -- ---- ----- -- -
10. flex
flex 是 flex-grow、flex-shrink 和 flex-basis 的缩写。可以通过 flex: 1 的方式设置弹性项目的属性。
----- - ----- -- -- --- ---------- -- ------------ -- ----------- -- -- -
11. align-self
align-self 定义了弹性项目在交叉轴上的对齐方式。默认值为 auto，表示继承父级容器的 align-items 属性。可以设置为 flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐）、stretch（拉伸对齐）。
----- - ----------- ------- -- ---- -- -
实例演示
下面通过实例演示 Flexbox 布局的用法。
1. 水平居中
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- - -------- ----- ---------------- ------- -
2. 垂直居中
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- - -------- ----- ------------ ------- -
3. 水平垂直居中
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- - -------- ----- ---------------- ------- ------------ ------- -
4. 两端对齐
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- - -------- ----- ---------------- -------------- -
5. 换行
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- - -------- ----- ---------- ----- - ----- - ------ ------ ------- ------ -
6. 垂直排列
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- - -------- ----- --------------- ------- -
总结
本文介绍了 Flexbox 布局的基础概念、属性和示例代码。通过学习本文，读者可以掌握该技术并应用于实际开发中。在实际开发中，Flexbox 布局可以帮助我们更加灵活地进行页面布局，提高页面的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66022e8ad10417a222d932be