flex布局

Flex布局，全稱Flexible Box Layout，意為「彈性盒布局」，是一種現代的CSS布局模式。它旨在提供一種更有效的方式來布局、對齊和分配容器中項目之間的空間，即使它們的大小未知或動態變化。Flex布局的主要特點和優勢包括靈活性、對齊方式、方向控制、空間分配和簡化布局。

Flex布局支持6個容器屬性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。這些屬性分別負責定義主軸的方向、子元素的換行方式、子元素的對齊方式等。例如，flex-direction屬性用於定義主軸的方向，決定了flex容器中的子元素的排列方式。

當一個容器被設定為Flex布局後，其所有直接子元素會自動成為Flex項目，這些項目可以靈活地擴展和收縮以填充可用空間或調整大小以適應內容。此外，Flex布局還允許項目自身有單獨的交叉軸對齊方式，通過align-self屬性實現。