成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Flex布局使用總結(jié)

xavier / 887人閱讀

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

所有內(nèi)容均源自阮一峰老師的文章Flex 布局教程：語(yǔ)法篇，不過(guò)此總結(jié)都是結(jié)合平時(shí)使用的自我表述。
引言

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

Flex布局主要由兩層結(jié)構(gòu)實(shí)現(xiàn)，外層container和內(nèi)層item，當(dāng)然內(nèi)層item也可以是更內(nèi)層的container

容器：外層container
項(xiàng)目：內(nèi)層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

控制項(xiàng)目的換行規(guī)則，因?yàn)槟J(rèn)不換號(hào)，當(dāng)項(xiàng)目的寬度之和大于容器的寬度時(shí)，會(huì)根據(jù)項(xiàng)目的一些屬性決定實(shí)際寬度分配

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

flex-flow

是flex-direction和flex-wrap的縮寫

// 默認(rèn) flex-flow: row nowrap
flex-flow:  || ;
justify-content

主軸上的對(duì)齊方式

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

align-items

交叉軸上的對(duì)齊方式

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

align-content

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

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


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

項(xiàng)目的屬性

order

flex-grow

flex-shrink

flex-basis

flex

align-self

order

定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，可以是負(fù)數(shù)，相同時(shí)依dom順序。

order: ; // 0 default
flex-grow

定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大。負(fù)數(shù)無(wú)效，瀏覽器視作默認(rèn)值0。

flex-grow: ; // 0 default


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

flex-shrink

定義了項(xiàng)目的縮小比例，即如果空間不足，該項(xiàng)目將縮小，flex-shrink屬性為0時(shí)項(xiàng)目不縮小，負(fù)數(shù)無(wú)效，瀏覽器視作默認(rèn)值1。

flex-shrink: ; // 1 default


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

flex-basis

flex-grow和flex-shrink都提到了剩余空間，其實(shí)就是根據(jù)這個(gè)屬性計(jì)算的，它的默認(rèn)值為auto，即項(xiàng)目的本來(lái)大小。bootstrap4的柵格系統(tǒng)就是用了這個(gè)屬性替代了bootstrap3的float:left+width%組合。

flex-basis:  | auto; // auto default
flex

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

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

align-self

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53507.html

相關(guān)文章

  • 一只菜鳥對(duì)于彈性布局的總結(jié)

    摘要：它的所有子元素自動(dòng)成為容器成員，稱為項(xiàng)目，簡(jiǎn)稱項(xiàng)目。容器有兩個(gè)軸，一個(gè)水平主軸一個(gè)垂直交叉軸，起點(diǎn)終點(diǎn)都是容器的邊界。為垂直交叉軸對(duì)齊方式，擁有的屬性如下交叉軸的起點(diǎn)對(duì)齊。將占滿整個(gè)容器的高度。 啥是彈性布局（問(wèn)號(hào)臉）？以前盒子的布局都是使用position、float、display來(lái)布局的，其實(shí)超級(jí)煩的，最近發(fā)現(xiàn)了一個(gè)知識(shí)點(diǎn)，那就彈性布局，那就讓我們來(lái)看看什么是彈性布局吧！ Wha...

    B0B0 評(píng)論0 收藏0

  • 對(duì)“粘連”footer布局的思考和總結(jié)

    摘要：經(jīng)典的粘連布局參考文章鏈接在文章末尾，簡(jiǎn)單的語(yǔ)言總結(jié)如下經(jīng)典的粘連布局就是。當(dāng)元素比較短的時(shí)候比如小于屏幕的高度，我們期望這個(gè)元素能夠粘連在屏幕的底部。 經(jīng)典的粘連footer布局 參考文章鏈接在文章末尾，簡(jiǎn)單的語(yǔ)言總結(jié)如下： 經(jīng)典的粘連footer布局就是。我們有一塊內(nèi)容。當(dāng)?shù)母叨茸銐蜷L(zhǎng)的時(shí)候，緊跟在后面的元素會(huì)跟在元素的后面。當(dāng)元素比較短的時(shí)候（比如小于屏幕的高度），我們期望這個(gè)元...

    Near_Li 評(píng)論0 收藏0

  • Flex布局使用總結(jié)

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

    marek 評(píng)論0 收藏0

  • Flex布局使用總結(jié)

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

    lei___ 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

xavier

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<