Flex彈性布局總結

一、在容器box上設定的屬性

二、在item專案上設定的屬性

一、在容器box上設定的屬性

前提：display:flex;或display:inline-flex;

item專案的排列方向：flex-direction

flex-direction:（有以下屬性值）

row    從左往右
row-reverse    從右往左
column    從上往下
column-reverse    從下往上

flex-wrap:（有以下屬性值）

nowrap   不換行
wrap   換行
wrap-reverse  換行但順序顛倒第一行在最下方

flex-flow：

預設值：row nowrap

justify-content:（有以下屬性值）

flex-start 左對齊
flex-end 右對齊
center 中間對齊
space-between 兩邊對齊
space-around item之間的間隔相等

align-items:（有以下屬性值）

flex-start 起點對齊
flex-end  終點對齊
center  中間對齊
baseline 基線對齊
stretch 若沒設定高度或為auto將拉伸整個容器

注意：是多根，一根的話該屬性沒用

align-content:（有以下屬性值）

flex-start  起點對齊
flex-end    終點對齊
center  中間對齊
space-between 兩端對齊
space-around item專案之間的間隔相等
stretch 軸線佔滿整個交叉軸

二、在item專案上設定的屬性

前提在容器上設定display:flex或display:inline-flex

order: 預設0，數值越小越靠前，可以是負數

flex-grow: 預設值是0，如果存在剩餘空間，也不放大

flex-shrink:預設值是1，即如果空間不足，該item將按比例縮小

flex-basis: 預設值是auto,也可以是以px為單位的固定數字

flex

預設值：0
1 auto,
none |
[<
'flex-grow'
>
<
'flex-shrink'
>?||
<
'flex-basis'
>
]

align-self: （有以下屬性值）

auto 預設值，繼承父元素的align-item屬性值
flex-start 上方
flex-end 下方
center 中間
baseline 基線
stretch 拉伸

彈性布局（flex）總結

flex direction row row reverse column column reverse row 從左到右 預設 row reverse 從右到左 column 從上到下 column reverse 從下到上 nowrap 不換行，佔滿一行會被擠小 預設 wrap 換行 wrap ...

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...