flex布局有關屬性整理

2021-10-08 05:46:33 字數 1111 閱讀 6896

一、flex容器屬性有:

flex-direction:設定主軸方向,可設定的屬性值有

a. row:表示橫向排列,從左至右

b. row-reverse:表示橫向排列,從右至左

c. column:表示縱向排列,從上至下

d. column-reverse:表示縱向排列,從下至上排列

flex-wrap:設定一條軸線排不下如何換行,屬性值有

a.wrap:內容超過後換行

b.nowrap:不換行,總是在一行顯示

c.wrap-reverse:換行後有兩行,reverse就是把兩行的排列順序倒過來

justify-content:主軸對齊方式,屬性值有

a.center:中心對齊

b.flex-start: 左對齊

c.flex-end:右對齊

d:space-between:左右兩側沒有間距,中間間距相同

e:space-around:左右兩側的間距為中間間距的一半

align-items:交叉軸對齊方式,屬性值有

a:stretch:拉伸

b:flex-start:上對齊

c:flex-end:下對齊

d:center:中心對齊

e:baseline:基線對齊

align-content:多根軸線對齊方式,屬性值有

a:stretch:拉伸

b:flex-start:上對齊

c:flex-end:下對齊

d:center:中心對齊

e:space-between:上下沒有間距,中間各子元素間距相同

f:space-around:上下間距之和等於中間各個間距

二、flex容器中的flex-item屬性有:

order:排列順序

flex-grow:放大比例,剩餘空間怎麼分配

flex-shrink :縮小比例,超出空間怎麼壓縮

flex-basis:item所佔主軸空間,優先順序高於width

align-self:對齊方式,覆蓋align-items

flex:這個屬性是flex-grow, flex-shrink 和 flex-basis的簡寫,預設值為0 1 auto,後兩個屬性可選

flex布局 所有屬性整理

flex布局 彈性盒布局,flex容器,子元素flex專案 預設兩根軸 水平軸和垂直交叉軸,專案預設沿主軸排列 注意,設為 flex 布局以後,子元素的float clear和vertical align屬性將失效。一 容器的屬性 flex direction flex wrap flex flow...

Flex布局屬性學習整理

a.使用在容器上的六大屬性值 1.flex direction 2.flex wrap 3.flex flow 4.justify content 5.align items 6.align content 1.flex direction屬性決定主軸的方向,即專案的排列方式 有四個值可供選擇 ro...

Flex布局微整理

必記屬性 flex container 屬性 flex direction 方向 row 從左往右 預設一行一行展示 row reverse 從右往左 反向 column 從上往下 一列一列展示 column reverse 從下往上 反向 flex wrap 換行 wrap 換行 no wrap ...