Flex布局使用總結

xavier 發布于2019-08-02 14:00 / 877人閱讀

摘要：所有內容均源自阮一峰老師的文章布局教程語法篇，不過此總結都是結合平時使用的自我表述。引言布局使得一個框體內部的排版更為便捷，比如柵格排版，自適應分配長寬，垂直居中等，原來可能需要很多樣式配合來完成，使用，就變得更了。

所有內容均源自阮一峰老師的文章Flex 布局教程：語法篇，不過此總結都是結合平時使用的自我表述。

引言

Flex布局使得一個框體內部的排版更為便捷，比如柵格排版，自適應分配長寬，垂直居中等，原來可能需要很多樣式配合來完成，使用flex，就變得更native了。

Flex布局主要由兩層結構實現，外層container和內層item，當然內層item也可以是更內層的container

容器：外層container
項目：內層item
主軸：item的排列方向
交叉軸：與主軸垂直

容器的屬性

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction

主軸的方向

// row 自左向右
// row-reverse 自右向左
// column 自上而下
// row 自下向上
flex-direction: row(default) | row-reverse | column | column-reverse;

flex-wrap

控制項目的換行規則，因為默認不換號，當項目的寬度之和大于容器的寬度時，會根據項目的一些屬性決定實際寬度分配

// nowrap 不換行
// wrap 換行，新行在下方
// wrap-reverse 換行，新行在上方
flex-wrap: nowrap(default) | wrap | wrap-reverse;

flex-flow

是flex-direction和flex-wrap的縮寫

// 默認 flex-flow: row nowrap
flex-flow:  || ;

justify-content

主軸上的對齊方式

justify-content: flex-start(default) | flex-end | center | space-between | space-around;

align-items

交叉軸上的對齊方式

// flex-start 交叉軸的起點對齊
// flex-end 交叉軸的終點對齊
// center 交叉軸的中點對齊
// baseline 項目的第一行文字的基線對齊
// stretch 如果項目未設置高度或設為auto，將占滿整個容器的高度
align-items: flex-start | flex-end | center | baseline | stretch(default);

align-content

定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

// flex-start 與交叉軸的起點對齊
// flex-end 與交叉軸的終點對齊
// center 與交叉軸的中點對齊
// space-between 與交叉軸兩端對齊，軸線之間的間隔平均分布
// space-around 每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍
// stretch 軸線占滿整個交叉軸
align-content: flex-start | flex-end | center | space-between | space-around | stretch(default);

重點看上圖的stretch，從item設了高度和沒設高度/auto的區別可看出，stretch的原理是將交叉軸根據行數平分(交叉軸長度/行數)成若干份，如果設了高度，就用真是高度，沒設高度就填充單份高度。

項目的屬性

order

flex-grow

flex-shrink

flex-basis

flex

align-self

order

定義項目的排列順序。數值越小，排列越靠前，可以是負數，相同時依dom順序。

order: ; // 0 default

flex-grow

定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。負數無效，瀏覽器視作默認值0。

flex-grow: ; // 0 default

注意放大比例是從剩余空間分配的，上圖item最終實際寬度(px)：
圖一：
剩余寬度restWidth = 300-3*50
紅色寬度redWidth = 1/3*restWidth+50
黃色寬度yellowWidth = 2/3*restWidth+50
綠色寬度greenWidth = 50
圖二依次類推
圖三因為沒有剩余寬度，發揮作用的是flex-shrink

flex-shrink

定義了項目的縮小比例，即如果空間不足，該項目將縮小，flex-shrink屬性為0時項目不縮小，負數無效，瀏覽器視作默認值1。

flex-shrink: ; // 1 default

注意當flex-shrink屬性為0的項目總寬度大于等于容器寬度時，即沒有剩余空間分配時，其余flex-shrink屬性不為0的項目寬度會縮小成剛好能夠容納內容，padding,margin依然有效。上圖item最終實際寬度(px)：
圖一：
剩余寬度restWidth = 300-3*100 = 0
所以redWidth和yellowWidth變成了能夠容納內容的最小寬度
圖二：
剩余寬度restWidth = 300-2*100 = 100
所以redWidth和yellowWidth按照某種比例分配了restWidth，分配策略還沒弄清楚

flex-basis

flex-grow和flex-shrink都提到了剩余空間，其實就是根據這個屬性計算的，它的默認值為auto，即項目的本來大小。bootstrap4的柵格系統就是用了這個屬性替代了bootstrap3的float:left+width%組合。

flex-basis:  | auto; // auto default

flex

是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。bootstrap4的柵格系統用的是(0 0 %)

flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]

align-self

允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

GPU云服務器云服務器 flex布局使用方法總結 flex flex40

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53507.html

一只菜鳥對于彈性布局的總結

摘要：它的所有子元素自動成為容器成員，稱為項目，簡稱項目。容器有兩個軸，一個水平主軸一個垂直交叉軸，起點終點都是容器的邊界。為垂直交叉軸對齊方式，擁有的屬性如下交叉軸的起點對齊。將占滿整個容器的高度。啥是彈性布局（問號臉）？以前盒子的布局都是使用position、float、display來布局的，其實超級煩的，最近發現了一個知識點，那就彈性布局，那就讓我們來看看什么是彈性布局吧！ Wha...

B0B0 2019-08-01 18:00 評論0 收藏0
對“粘連”footer布局的思考和總結

摘要：經典的粘連布局參考文章鏈接在文章末尾，簡單的語言總結如下經典的粘連布局就是。當元素比較短的時候比如小于屏幕的高度，我們期望這個元素能夠粘連在屏幕的底部。經典的粘連footer布局參考文章鏈接在文章末尾，簡單的語言總結如下：經典的粘連footer布局就是。我們有一塊內容。當的高度足夠長的時候，緊跟在后面的元素會跟在元素的后面。當元素比較短的時候（比如小于屏幕的高度），我們期望這個元...

Near_Li 2019-08-30 13:17 評論0 收藏0
Flex布局使用總結

摘要：所有內容均源自阮一峰老師的文章布局教程語法篇，不過此總結都是結合平時使用的自我表述。引言布局使得一個框體內部的排版更為便捷，比如柵格排版，自適應分配長寬，垂直居中等，原來可能需要很多樣式配合來完成，使用，就變得更了。所有內容均源自阮一峰老師的文章Flex 布局教程：語法篇，不過此總結都是結合平時使用的自我表述。引言 Flex布局使得一個框體內部的排版更為便捷，比如柵格排版，自適應分...

marek 2019-08-30 15:55 評論0 收藏0
Flex布局使用總結

摘要：所有內容均源自阮一峰老師的文章布局教程語法篇，不過此總結都是結合平時使用的自我表述。引言布局使得一個框體內部的排版更為便捷，比如柵格排版，自適應分配長寬，垂直居中等，原來可能需要很多樣式配合來完成，使用，就變得更了。所有內容均源自阮一峰老師的文章Flex 布局教程：語法篇，不過此總結都是結合平時使用的自我表述。引言 Flex布局使得一個框體內部的排版更為便捷，比如柵格排版，自適應分...

lei___ 2019-08-23 14:22 評論0 收藏0