flex的屬性有：1、flex-direction，設定主軸的方向；2、justify-content，設定主軸上的子元素排列方式；3、flex-wrap，設定子元素是否換行；4 、align-content，設定側軸上的所有子元素排列方式；5、align-items ：設定側軸上子元素自己的排列方式等等。
本教學作業系統：Windows10系統、Dell G3電腦。
flex的屬性：
1、flex-direction
#設定主軸的方向
屬性值說明
row 預設值從左到右
row-reverse 從左到右
column 從上往下
column-reverse 從上往下
#2、justify-content
設定主軸上的子元素排列方式
justify-content 屬性定義了主軸上項目的對齊方式
#注意：使用這個屬性之前一定要確定好主軸是那個
屬性值說明
flex-start 預設值，從頭部開始（如果主軸是X軸，則從左到右）
flex-end 從尾部開始排列
center 在主軸居中對齊（如果主軸是X軸，則水平居中）
space-around 平分剩餘空間
space-between 先兩邊貼邊，再平分剩餘空間（重要）
3、flex-wrap
設定子元素是否換行
預設情況下，項目都排在一條線（又稱「軸線」）上。 flex-wrap屬性定義，flex佈局中預設為不換行的
屬性值說明
nowrap 預設值，不換行
wrap 換行
#4、align-content
設定側軸上的子元素排列方式（多行）
屬性值說明
flex-start 預設值，在側軸的頭部開始排列
flex-end 在側軸的尾部開始排列
center 在側軸的中間顯示
space-around 子項在側軸平分剩餘空間
space-between 子項在側軸先分佈在兩頭，再平分剩餘空間
stretch 設定子項元素高度平分父元素高度align-items ：設定側軸上的子元素排列方式（單行）
#5、align-items
設定側軸上的子元素排列方式（單行）
屬性值說明
flex-start 預設值，從上到下
flex-end 從下往上
center 擠在一起居中（垂直居中）
stretch 拉伸
6、flex-flow
flex-direction 和flex-wrap 屬性的複合屬性
屬性值說明
flex：子項目佔的份數
align-self： 控制子項在自己側軸的排列方式
order： 屬性定義子項的排列順序（前後順序）
以上是flex的屬性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！
