彈性布局flex是一種現代的網頁布局方法，它提供了更加靈活和高效的布局方式，可以解決許多傳統布局方法難以處理的問題。Flexbox是一種一維布局模型，它將一個容器中的項目組織在一行或一列中，并根據容器的大小和項目的特性，自動調整項目的排列方式。彈性布局flex的主要特點包括：1、主軸和交叉軸；2、對齊和分布；3、彈性項目的屬性；4、換行和反向；5、空間分布和大小調整等等。
本教程操作系統：windows10系統、DELL G3電腦。
彈性布局，也稱為Flexbox，是一種現代的網頁布局方法，它提供了更加靈活和高效的布局方式，可以解決許多傳統布局方法難以處理的問題。Flexbox是一種一維布局模型，它將一個容器中的項目組織在一行或一列中，并根據容器的大小和項目的特性，自動調整項目的排列方式。
Flexbox的主要特點包括：
1、主軸和交叉軸：彈性布局將容器分為兩個方向，主軸和交叉軸。主軸是項目排列的主要方向，而交叉軸是與主軸垂直的方向。通過設置flex-direction屬性，可以定義主軸的方向，從而決定項目的排列方向。
2、對齊和分布：在彈性布局中，項目的對齊和分布可以通過justify-content和align-items屬性進行控制。justify-content屬性定義了項目在主軸上的對齊方式，而align-items屬性則定義了項目在交叉軸上的對齊方式。這些屬性可以使項目在水平和垂直方向上居中、靠左或靠右等。
3、彈性項目的屬性：彈性項目的屬性包括flex-grow、flex-shrink和flex-basis。flex-grow定義了項目在空間不足時的放大比例，flex-shrink則定義了項目在空間過剩時的縮小比例，而flex-basis則定義了項目的默認大小。這些屬性可以用來控制項目的伸縮性和大小調整。
4、換行和反向：通過設置flex-wrap屬性，可以控制項目是否換行。如果設置為flex-wrap: wrap，項目會在容器內換行。另外，使用flex-reverse屬性可以反轉項目的排列順序，實現反向布局。
5、空間分布和大小調整：通過設置align-content和justify-content屬性，可以控制多行項目的空間分布和對齊方式。此外，還可以使用flex-basis、flex-grow和flex-shrink屬性來調整項目的大小，實現更加靈活的布局效果。
6、交叉軸順序：在彈性布局中，項目的排列順序除了由主軸方向決定外，還可以通過設置交叉軸的順序進行調整。使用flex-start、flex-end、flex-left和flex-right屬性可以定義項目的排列順序，這些屬性指定了項目在交叉軸上的起始位置或結束位置。
7、交叉軸對齊：交叉軸的對齊方式可以通過align-self屬性進行單獨設置。這使得我們可以在交叉軸上對齊項目，以覆蓋容器中的對齊設置。align-self屬性可以設置為auto、flex-start、flex-end、center、baseline或stretch。
8、彈性容器的額外規則：對于彈性容器，還有一些額外的規則需要遵循。例如，彈性容器可以使用align-items和justify-content屬性來控制項目的對齊方式。另外，彈性容器還具有一個額外的子項：彈性分隔符。這個分隔符可以用來控制項目之間的間距，并可以通過設置justify-content: space-between;使第一個項目與彈性容器邊緣對齊，最后一個項目與彈性容器邊緣對齊。
9、嵌套彈性容器：在彈性布局中，我們可以將一個彈性容器嵌套在另一個彈性容器內。在這種情況下，內部容器會繼承外部容器的對齊方式、主軸方向和換行屬性。但是，內部容器的交叉軸方向始終與外部容器的主軸方向垂直。
Flexbox是一種非常強大且靈活的布局方式，它可以簡化網頁布局的過程并提高開發效率。通過使用Flexbox，開發者可以更容易地實現復雜的布局設計，并且能夠更好地適應各種屏幕尺寸和設備類型。
