flex之所以被稱為彈性布局，是因?yàn)樗軌驅(qū)崿F(xiàn)更加靈活和高效的網(wǎng)頁布局，并且具有彈性，可以自適應(yīng)不同的屏幕大小和設(shè)備類型，這種布局方式的出現(xiàn)，解決了許多傳統(tǒng)布局方法難以處理的問題，比如垂直居中、項(xiàng)目對(duì)齊、換行排列等。彈性布局具有主軸和交叉軸、對(duì)齊和分布、彈性項(xiàng)目的屬性、換行和反向、空間分布和大小調(diào)整等特點(diǎn)。它能夠適應(yīng)不同的屏幕大小和設(shè)備類型，實(shí)現(xiàn)更加靈活和高效的網(wǎng)頁布局。
本教程操作系統(tǒng)：windows10系統(tǒng)、DELL G3電腦。
彈性布局（Flexbox）之所以被稱為彈性布局，是因?yàn)樗軌驅(qū)崿F(xiàn)更加靈活和高效的網(wǎng)頁布局，并且具有彈性，可以自適應(yīng)不同的屏幕大小和設(shè)備類型。這種布局方式的出現(xiàn)，解決了許多傳統(tǒng)布局方法難以處理的問題，比如垂直居中、項(xiàng)目對(duì)齊、換行排列等。
彈性布局是一種一維布局模型，它將一個(gè)容器中的項(xiàng)目組織在一行或一列中，并根據(jù)容器的大小和項(xiàng)目的特性，自動(dòng)調(diào)整項(xiàng)目的排列方式。這種布局方式具有以下特點(diǎn)：
1、主軸和交叉軸：彈性布局將容器分為兩個(gè)方向，主軸和交叉軸。主軸是項(xiàng)目排列的主要方向，而交叉軸是與主軸垂直的方向。通過設(shè)置flex-direction屬性，可以定義主軸的方向，從而決定項(xiàng)目的排列方向。
2、對(duì)齊和分布：在彈性布局中，項(xiàng)目的對(duì)齊和分布可以通過justify-content和align-items屬性進(jìn)行控制。justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式，而align-items屬性則定義了項(xiàng)目在交叉軸上的對(duì)齊方式。這些屬性可以使項(xiàng)目在水平和垂直方向上居中、靠左或靠右等。
3、彈性項(xiàng)目的屬性：彈性項(xiàng)目的屬性包括flex-grow、flex-shrink和flex-basis。flex-grow定義了項(xiàng)目在空間不足時(shí)的放大比例，flex-shrink則定義了項(xiàng)目在空間過剩時(shí)的縮小比例，而flex-basis則定義了項(xiàng)目的默認(rèn)大小。這些屬性可以用來控制項(xiàng)目的伸縮性和大小調(diào)整。
4、換行和反向：通過設(shè)置flex-wrap屬性，可以控制項(xiàng)目是否換行。如果設(shè)置為flex-wrap: wrap，項(xiàng)目會(huì)在容器內(nèi)換行。另外，使用flex-reverse屬性可以反轉(zhuǎn)項(xiàng)目的排列順序，實(shí)現(xiàn)反向布局。
5、空間分布和大小調(diào)整：通過設(shè)置align-content和justify-content屬性，可以控制多行項(xiàng)目的空間分布和對(duì)齊方式。此外，還可以使用flex-basis、flex-grow和flex-shrink屬性來調(diào)整項(xiàng)目的大小，實(shí)現(xiàn)更加靈活的布局效果。
由于彈性布局具有以上的特點(diǎn)，它能夠適應(yīng)不同的屏幕大小和設(shè)備類型，實(shí)現(xiàn)更加靈活和高效的網(wǎng)頁布局。因此，它被稱為彈性布局。
