flex的屬性有哪些

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中文網其他相關文章！