1。使用display：flex宣告一個Flex佈局，這個容器稱為Flex容器，其包含的子元素稱為Flex專案
在Flex容器中有幾個核心術語
容器： 使用
display：flex
屬性元素
專案： 容器的“子元素”
主軸： 專案排列的軸線
交叉軸： 與主軸垂直的軸線
<！DOCTYPE html>
效果圖：
2。容器屬性
屬性描述
flex-flow主軸方向與換行方式justify-content專案在主軸上的對齊方式align-items專案在交叉軸上的對齊方式align-content專案在多行容器中的對齊方式
建立一個盒模型，宣告為flex佈局：
html程式碼
css樣式：
效果圖：
2.1 彈性專案在主軸上的排列方式
彈性專案在主軸上的排列方式有兩種：
1。單行容器
flex-direction： row；
針對上面的樣式，可以給。box一個樣式：
flex-direction： row；flex-wrap： nowrap；
以上兩行樣式的意思是，有一個主軸沿水平方向的flex佈局，並且它下面的專案水平排列不換行。效果圖就是上述樣式，因為預設的是水平排列不換行，這兩行樣式可以簡寫成一行：
flex-flow： row nowrap；
2。多行容器
flex-direction： column；flex-wrap： nowrap；
效果如圖：
此時的主軸方向變成垂直方向了，水平方向變成了交叉軸，因此每個專案會沿著主軸垂直排列，如果設定了允許換行：
flex-direction： column；flex-wrap： wrap；
在一列排不下的時候，會自動換行到第二列，效果如圖：
上面兩行樣式程式碼一樣可以簡寫成：
flex-flow： column nowrap；
2。2 彈性專案在單行容器的對齊方式
html：
css樣式：
效果圖：
設定專案在單行容器主軸上的對齊有個前提：主軸上必須有剩餘空間。
專案在主軸上的對齊方案：
1。將所有專案視為一個整體，在專案組兩邊進行分配
左對齊
justify-content: flex-start;
居中
justify-content: center;
右對齊
justify-content: flex-end;
這三個屬性的效果如下圖：
2。將專案視為一個個獨立的個體，在專案之間進行分配
分散對齊
justify-content: space-around;
每個左右兩邊的間距相等
兩端對齊
justify-content: space-between;
首尾專案頂格，每個專案之間的間距相等
平均對齊
justify-content: space-evenly;
每個專案之間的間距相等
這三個屬性的效果如下圖：
2.2 彈性專案在交叉軸上的排列方式
屬性描述
stretch預設效果，拉伸到容器的高度flex-start彈性專案沿交叉軸頂部對齊center彈性專案在容器裡沿交叉軸居中flex-end彈性專案在交叉軸底部對齊。
/* 交叉軸的對齊方案 */。box { align-items： stretch； align-items： flex-start； align-items： center； align-items： flex-end；}
效果圖：
注意：有一點值得注意的是，如果使用stretch，專案上不要設定高度，否則無法拉伸子專案的高度。
3。專案屬性
屬性描述
flex專案的縮放比例與基準寬度align-self單個專案在交叉軸上的對齊方式order專案在主軸上排列順序
現有如下的彈性盒模型：
html：
css樣式：
效果圖：
flex： 放大因子 收縮因子 專案在主軸上的基準寬度
flex： flex-grow flex-shrink flex-basis；
現在在。item專案上加上一個屬性flex，有如下樣式：
flex： 0 1 auto；
該值是預設效果，效果與上面的效果圖一致，還可以寫成：
flex： inherit；
允許放大或收縮，禁止放大或收縮
/* 允許放大或收縮 */flex： 1 1 auto；/* 禁止放大或收縮 */flex： 0 0 auto；
效果圖：
禁止放大或收縮還可以寫成：
flex： none；
如果只有一個引數，省略後面兩個引數，表示放大因子，例如：
flex： 1；
上述的程式碼等價於：
flex： 1 1 auto；
