CSS3彈性盒布局總結(二)

2021-07-29 16:13:59 字數 1048 閱讀 9153

昨天發現flex屬性的總結(一)裡的屬性和w3cschool裡的flex屬性有很多都是重複的功能。今天翻了一篇w3cplus裡的一篇文章:戳這裡,發現其實是flex語法的兩個不同的版本。昨天那個比較老,今天總結的是最新的語法標準。

父元素的屬性有:

display:flex 父元素及子元素使用彈性盒布局

flex-directions: 決定主軸的方向 row|row-reverse|column|column-reverse

flex-wrap: 子元素是否換行 nowrap|wrap|wrap-reverse

justify-content:

子元素以垂直於主軸的交叉軸為參照線的對齊方式 (預設主軸為水平方向)

flex-start|center|flex-end|space-between|space-around

align-item:

子元素以主軸為參照線的對齊方式

flex-start|center|flex-end|baseline|strentch

align-content:

多行子元素以主軸為參照線的對齊方式

flex-start | flex-end | center | space-between | space-around | stretch

子元素的屬性有:

order: 子元素自己的排列順序 預設為0 數值越小排列越靠前

flex-grow: 子元素的放大比例 無單位,預設為 0 有空間 不放大

flex-shrink: 子元素的縮小比例 無單位,預設為1 沒空間 就縮小 如果為0 表示沒空間 不縮小』

flex-basis: 子元素佔據主軸的初始空間 預設為auto 即專案本來大小 可帶單位

flex 是flex-grow|flex-shrink|flex-basis 的縮寫 auto(1 1 auto) none(0 0 auto)

align-self: 子元素以主軸為參照線的對齊方式

auto|flex-start|center|flex-end|baseline|strentch

CSS3彈性盒布局

使用自適應的視窗彈性盒布局 可以使div總寬度等於瀏覽器寬度,而且可以隨著瀏覽器的改變而改變。12 zh cn 33536 container 37 left sidebar 示例文字,頁面中比較長的示例文字。示例文字,頁面中比較長的示例文字。示例文字,頁面中比較長的示例文字。示例文字,頁面中比較長...

CSS3彈性盒布局

使用自適應的視窗彈性盒布局 可以使div總寬度等於瀏覽器寬度,而且可以隨著瀏覽器的改變而改變。1 2 335 36 37 示例文字,頁面中比較長的示例文字。示例文字,頁面中比較長的示例文字。示例文字,頁面中比較長的示例文字。示例文字,頁面中比較長的示例文字。示例文字,頁面中比較長的示例文字。38 示...

CSS3 彈性盒布局總結(一)

一 css3彈性盒是什麼?一種提供響應式布局的解決方案,與傳統的css2盒模型在子元素表現上有很大不同。具體不同是在盒子會自動隨著外部元素的寬度或者裝置寬度不同而動態分配寬度。二 布局結構 父元素 n個子元素 1.display flex 宣告彈性盒布局 2.box orient horizonta...