flex彈性布局是w3c在2023年提出的新的布局方式，內含的大量的屬性，使其可以方便，有效，高適配，響應式的進行頁面布局。是目前前端開發的一種重要的布局。
一、簡介
flex布局是對容器設定的一種布局方式。通過對容器進行display: flex;實現修改容器為flex彈性布局。再通過一系列屬性設定，達到對容器內的元素進行控制。
二、容器（父元素）的屬性
flex-direction
justify-content
align-items
flex-wrap
flex-flow
align-content
1. flex-direction
flex布局中存在主軸和副軸的概念，flex-direction就是設定主軸方向的屬性。設定完主軸方向，另乙個方向即為副軸。有以下4個值
flex-direction: row | row-reverse | column | column-reverse;2. justify-contentjustify-content是設定元素在主軸方向上的位置。有以下5個值
（例子採用預設主軸方向是水平，左到右）
justify-content: flex-start | flex-end | center | space-between | space-around;3. align-itemsalign-items是設定元素在副軸方向上的位置。有以下5個值
（例子採用預設副軸方向上到下）
align-items: flex-start | flex-end | center | stretch | baseline;4. flex-wrapflex-wrap是設定換行的屬性，有以下3個值（例子的父元素高寬都為40px，子元素高20px，寬10px）
flex-wrap: nowrap | wrap | wrap-reverse;5. flex-flowflex-flow是flex-direction和flex-wrap的簡寫形式，預設值為row nowrap
flex-flow: flex-direction flex-wrap;6. align-contentalign-content定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用，有以下6個值
align-content: flex-start | flex-end | center | space-between | space-around | stretch;三、子元素屬性由於對父元素設定的屬性是對於所有子元素來說的，要是單獨的對其中的某個子元素進行操作，還需要對子元素設定對應的屬性，子元素的屬性有以下6種
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1. order
order屬性可以在不破壞html文件的結構前提下改變子元素的順序。order：數字；的方式使用，數字越小越靠前，預設都為0。
.father
.son
.son:nth-child(1)
.son:nth-child(2)
.son:nth-child(3)
2. flex-growflex-grow可以設定子元素的放大比例，預設為0，即有剩餘空間也不放大。
若將右邊的剩餘空間都分配給粉色子元素，只需給粉色子元素設定flex-grow：1；
若將右邊的剩餘空間都分配給粉色子元素1份和藍色子元素2份
.son:nth-child(1)
.son:nth-child(2)
.son:nth-child(3)
若元素太多超出父元素的大小，則所有元素等比例縮小
若不想讓第乙個粉色縮小，只需給第乙個粉色設定flex-shrink: 0;剩餘的其他子元素還是等比例縮放
4. flex-basisflex-basis屬性是設定在分配多餘空間之前，子元素提前佔據的主軸空間大小。預設值為auto，即子元素本身的大小，也可以手動設定數值（多少px），這個屬性一般很少用到，了解就可以。
5. flex
flex屬性flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可以不寫。
** 6. align-self**
align-self屬性設定子元素在副軸方向上的位置，有以下6個值，預設是auto，但是用的最多的就是center。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
.father
.son
.son:nth-child(1)
.son:nth-child(2)
.son:nth-child(3)
以上就是flex彈性布局的屬性的作用，作為頁面布局的重要方式之一，他的響應性和適配性是很重要的因素，也是我們必須掌握的一種布局方式。
flex布局（彈性布局）
flex是flexible box的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為flex布局。box行內元素也可以使用flex布局。boxwebkit核心的瀏覽器，必須加上 webkit字首。box注意，設為flex布局以後，子元素的float clear和vert...
Flex布局（彈性布局）
flex是flex box的縮寫，即彈性布局。任何乙個容器都可以指定為flex布局。行內元素也可以使用flex布局。webkit核心的瀏覽器，必須加上 webkit字首。box.box.box注意 設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用fl...
Flex布局 彈性布局
1.flex direction flex direction屬性決定主軸的方向 即專案的排列方向 flex direction row row reverse column column reverse 2.flex wrap 預設情況下，專案都排在一條線 又稱 軸線 上。flex wrap屬性定...