在學習前端的過程中，我們會接觸很多的布局樣式。這其中flex彈性布局大大加快了我們書寫頁面布局的速度，同時減少了很多任務作量。
flex布局是w3c在2023年提出的一種新的方案，可以簡便、完整、響應式地實現各種頁面布局。其中，flex是flexible box的縮寫，意為」彈性布局」，用來為盒狀模型提供最大的靈活性。
我們可以從**中找到這麼一句話：「採用flex布局的元素，稱為flex容器（flex container），簡稱」容器」。它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱」專案」。」
要提到的是，任何乙個容器都可以指定為flex布局，所以這也對書寫頁面布局帶來了快速有效的方案。在塊狀元素使用flex布局時，寫 display: flex,在行內塊元素上使用flex布局時，寫display: inline-flex。值得注意的是，設為flex布局以後，子元素的float、clear和vertical-align屬性也將失效。
主軸：當元素排列在一行時，主軸既表示元素排列方向，橫向排列則我們可以理解為主軸是一條橫線，預設情況下主軸方向是從左到右。
1.flex-direction屬性
這個屬性決定了容器中元素的排列方向。
它的預設值為row,它是主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
2.flex-wrap屬性
設定彈性盒子的子元素超出父容器時是否換行
屬性值：
nowrap: 預設值。規定元素不拆行或不拆列。
wrap:規定元素在必要的時候拆行或拆列。
wrap-reverse:規定元素在必要的時候拆行或拆列，但是以相反的順序。
3.align-item屬性
設定彈性盒子元素在側軸（縱軸）方向上的對齊方式
相關屬性值：
flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢位相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與』flex-start』等效。其它情況下，該值將參與基線對齊。
其中要說的，我們常用的是center這個屬性值，另外的幾個基本沒有怎麼用到。
4.align-content屬性
修改 flex-wrap 屬性的行為，類似 align-items, 但不是設定子元素對齊，而是設定行對齊(行與行的對其方式).
相關屬性：
flex-start： 沒有行間距
flex-end： 底對齊沒有行間距
center ：居中沒有行間距
space-between：兩端對齊，中間自動分配
space-around：自動分配距離
請注意本屬性在只有一行的伸縮容器上沒有效果。
5.justify-content屬性
設定彈性盒子元素在主軸（橫軸）方向上的對齊方式
相關屬性：
flex-star：t預設，頂端對齊
flex-end：末端對齊
center：居中對齊
space-between：兩端對齊，中間自動分配
space-around：自動分配距離
CSS3 flex彈性布局
css3的flex布局用法 任何乙個容器都可以指定為flex布局 行內元素也可以使用flex布局。box webkit核心的瀏覽器，必須加上 webkit字首 box 設為flex布局後，子元素的float clear 和vertical align屬性將失效。基本概念 採用css3 flex布局的...
CSS3 flex 彈性布局
為盒子模型提供最大的靈活性 基本概念 設定了 flex 布局的元素稱為 flex container 容器 所有子元素稱為 flex ite 專案 容器屬性 flex wrap 換行 預設情況下專案都排在一條線上，如果超出容器，則減少專案寬度，該屬性定義如何換行 flex flow 是 flex d...
CSS3 flex彈性布局之flex屬性
flex 大致分為兩類屬性 容器屬性和專案屬性 容器內部專案的屬性 flex 屬性 flex 1 如就給容器內部專案設定的屬性。這裡的 wrap 指容器，item 我們稱作專案。我們還需要知道flex屬性是flex grow,flex shrink和flex basis的簡寫，預設值為0 1 aut...