前端开发中，页面布局是一个非常重要的环节。随着页面复杂度的提高，传统的盒子模型布局已经无法满足设计师的要求。这时候就需要使用更加灵活、强大的布局方式，这就是 Flexbox。
Flexbox 是一种新的布局方式，它可以让你更加轻松地实现复杂的页面布局。本文将介绍 Flexbox 的基本概念、属性和实战应用，帮助你更好地掌握这一布局技术。
Flexbox 的基本概念
Flexbox 的本质是一种弹性盒子，通过对盒子的属性设置，可以让盒子的子元素按照一定的规则排列。在使用 Flexbox 布局时，需要先将父元素设为弹性容器，然后再对子元素进行布局。
弹性容器
在 Flexbox 中，父元素被称为弹性容器。弹性容器可以通过设置 display: flex 或 display: inline-flex 来定义。
---------- - -------- ----- -- ------ -- - ---------- - -------- ------------ -- ------ -- -
弹性子元素
在 Flexbox 中，子元素被称为弹性子元素。弹性子元素可以通过设置 flex 属性来控制自身的布局。
----- - ----- -- -- -------- -- -
主轴和交叉轴
在 Flexbox 中，有两个重要的概念：主轴和交叉轴。
主轴是弹性容器的方向，可以是水平方向或垂直方向。默认情况下，主轴的方向是水平方向。
交叉轴是与主轴垂直的方向，可以是垂直方向或水平方向。默认情况下，交叉轴的方向是垂直方向。
Flexbox 的属性
Flexbox 提供了一系列的属性，用于控制弹性容器和弹性子元素的布局。下面我们来逐一介绍这些属性。
弹性容器的属性
flex-direction
这个属性用于设置主轴的方向。默认情况下，主轴的方向是水平方向。
---------- - --------------- ---- -- --------- -- - ---------- - --------------- ------- -- --------- -- -
flex-wrap
这个属性用于控制弹性子元素是否换行。默认情况下，弹性子元素不换行。
---------- - ---------- ------- -- --- -- - ---------- - ---------- ----- -- -- -- -
flex-flow
这个属性是 flex-direction 和 flex-wrap 的简写形式。
---------- - ---------- --- ------- -- ------------- -- - ---------- - ---------- ------ ----- -- ------------ -- -
justify-content
这个属性用于控制弹性子元素在主轴上的对齐方式。默认情况下，弹性子元素在主轴上居中对齐。
---------- - ---------------- ----------- -- ------- -- - ---------- - ---------------- --------- -- ------- -- - ---------- - ---------------- ------- -- -------- -- - ---------- - ---------------- -------------- -- -------------------- -- - ---------- - ---------------- ------------- -- ------------------------------------ -- -
align-items
这个属性用于控制弹性子元素在交叉轴上的对齐方式。默认情况下，弹性子元素在交叉轴上居中对齐。
---------- - ------------ ----------- -- --------- -- - ---------- - ------------ --------- -- --------- -- - ---------- - ------------ ------- -- --------- -- - ---------- - ------------ --------- -- ---------- -- - ---------- - ------------ -------- -- ----------- -- -
align-content
这个属性用于控制弹性子元素在交叉轴上的对齐方式（当弹性子元素换行时）。默认情况下，弹性子元素在交叉轴上居中对齐。
---------- - -------------- ----------- -- --------- -- - ---------- - -------------- --------- -- --------- -- - ---------- - -------------- ------- -- --------- -- - ---------- - -------------- -------------- -- --------------------- -- - ---------- - -------------- ------------- -- ------------------------------------- -- - ---------- - -------------- -------- -- ----------- -- -
弹性子元素的属性
flex-grow
这个属性用于控制弹性子元素在剩余空间中的放大比例。默认情况下，弹性子元素不放大。
----- - ---------- -- -- -------- -- -
flex-shrink
这个属性用于控制弹性子元素在空间不足时的缩小比例。默认情况下，弹性子元素不缩小。
----- - ------------ -- -- ---- -- -
flex-basis
这个属性用于设置弹性子元素在主轴上的初始大小。默认情况下，弹性子元素的初始大小为内容的大小。
----- - ----------- ------ -- ----- ----- -- -
flex
这个属性是 flex-grow、flex-shrink 和 flex-basis 的简写形式。
----- - ----- - - ------ -- ------------------- ----- -- -
order
这个属性用于设置弹性子元素的顺序。默认情况下，弹性子元素的顺序与它们在 HTML 中的顺序一致。
----- - ------ -- -- ------ -- -
Flexbox 的实战应用
等分布局
在传统的布局方式中，实现等分布局需要使用比较复杂的技巧（如使用浮动、绝对定位等）。在 Flexbox 中，实现等分布局非常简单。
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- - -------- ----- - ----- - ----- -- -
垂直居中
在传统的布局方式中，实现垂直居中也需要使用比较复杂的技巧。在 Flexbox 中，实现垂直居中非常简单。
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- - -------- ----- ------------ ------- -- --------- -- - ----- - ----- -- -
列表布局
在传统的布局方式中，实现列表布局需要使用比较复杂的技巧（如使用浮动、绝对定位等）。在 Flexbox 中，实现列表布局非常简单。
--- ------------------ --- ------------------- --- ------------------- --- ------------------- -----
---------- - -------- ----- --------------- ------- -- --------- -- - ----- - ----- -- -
总结
Flexbox 是一种非常强大的布局方式，可以让你更加轻松地实现复杂的页面布局。在使用 Flexbox 布局时，需要先将父元素设为弹性容器，然后再对子元素进行布局。Flexbox 提供了一系列的属性，用于控制弹性容器和弹性子元素的布局。在实际应用中，可以使用 Flexbox 实现等分布局、垂直居中和列表布局等常见的布局需求。希望本文能够帮助你更好地掌握这一布局技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/663b9acdd3423812e4993bc3