彈性布局學習總結

2022-05-07 01:24:09 字數 908 閱讀 5213

請注意:

1.css 列(css columns)在彈性盒子中不起作用·

2.float,clearandvertical-align在flex專案中不起作用

flex-direction(適用於父累容器的元素上):設定或檢索伸縮紙盒物件的子元素在父容器中的位置

值:flex-direction:row| row-reverse | column | column-reverse

row:橫向從左到右排列(左對齊),預設的排列方式

row-reverse:反轉橫向排列(右對齊)

column:縱向排列

column-reverse:反轉縱向排列

flex生效需定義其父元素display為flex或inline-flex(box或inline-box,這是舊的方式)

justify-content(適用於父類容器上):設定或檢索彈性盒子元素再主軸(h橫軸)方向的對齊方式。

當彈性盒裡一行上的所有子元素都不能伸縮或已經達到其最大值時,這一屬性可協助對多餘的空間進行分配。當元素溢位某行時,這一屬性同樣會在對齊上進行控制。

justify-content:flex-start | flex-end | center | sapce-betweenn | space-around

flex-start:彈性盒子元素將向行始位置對齊。

flex-end:彈性盒子元素將向行借宿位置對齊

center:彈性盒子元素將向行中間位置對齊

jusryfy-content:space-between:彈性盒子元素會平均地分布在行裡。

space-around:彈性盒子元素會平均地分布在行裡,兩端保留子元素與子元素之間間距大小的一半。

彈性布局總結

彈性布局對於移動端頁面開發其實還是蠻重要的,今天來一些總結吧 flexbox 為display屬性賦予了乙個新的值 即box 值 flexbox的屬性有很多,記錄一些比較常用的屬性 display box 該屬性會將此元素及其直系子代加入彈性框模型中。flexbox 模型只適用於直系子代 box o...

彈性布局學習

值 描述 flex direction row 從左到右水平排列元素 預設值 flex direction row reverse 從右向左排列元素 flex direction column 從上到下垂直排列元素 flex direction column reverse 從下到上垂直排列元素 選...

彈性布局(flex)總結

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