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

資訊專欄INFORMATION COLUMN

css flex => flex-wrap

BWrong / 1287人閱讀

摘要：的元素默會(huì)默認(rèn)充滿一行或者一列，但是當(dāng)你給他們的設(shè)置了之后情況就會(huì)不一樣了?？梢越邮苋齻€(gè)值所有的元素充滿一行或者一列。

flex的元素默會(huì)默認(rèn)充滿一行或者一列，但是當(dāng)你給他們的contanier設(shè)置了flex-wrap之后情況就會(huì)不一樣了。
flex-wrap可以接受三個(gè)值：

1: nowrap
    所有flex的元素充滿一行或者一列。為默認(rèn)值。
2: wrap
    所有flex的元素按照其在HTML里面出現(xiàn)的順序在多行或者多列顯示
3: wrap-reverse
    所有flex的元素按照其在HTML里面出現(xiàn)的順序反過來在多行或者多列顯示

接下來我們就來看看這三個(gè)不同的值所表現(xiàn)出來的效果。因?yàn)閒lex-wrap跟flex-direction的聯(lián)系比較緊密，所以接下來會(huì)一一組合：
首先來看看我們的代碼：

//html


    
1

    
2

    
3

    
4

    
5

    
6

    
7




//css
.container {
    width: 500px;
    height: 100px;
    box-sizing: border-box;
    border: 1px solid green;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.item {
    background: yellow;
    border: 1px solid hotpink;
    width: 30%;
    box-sizing: border-box;
}

.short {
    background: pink;
}

1: flex-direction: row && flex-wrap: wrap

2: flex-direction: row && flex-wrap: wrap-reverse

3: flex-direction: row-reverse && flex-wrap: wrap

4: flex-direction: row-reverse && flex-wrap: wrap-reverse

因?yàn)榻酉聛硎前凑樟械呐帕星闆r，所以我們要給每一個(gè)flex元素一個(gè)height，把width去掉（去掉之后會(huì)默認(rèn)平均地分配寬），所以我們的css需要改變的部分是：

//只有.item改變?yōu)?.item {
    background: yellow;
    border: 1px solid hotpink;
    height: 30%;
    box-sizing: border-box;
}

5: flex-direction: column && flex-wrap: wrap

6: flex-direction: column && flex-wrap: wrap-reverse

7: flex-direction: column-reverse && flex-wrap: wrap

8: flex-direction: column-reverse && flex-wrap: wrap-reverse

總結(jié)：
當(dāng)flex元素水平排列時(shí)（flex-direction: row | row-reverse）

1: wrap 會(huì)按照從上到下的順序，依次生成新的行
2: wrap-reverse 會(huì)按照從下到上的順序，依次生成新的行

當(dāng)flex元素為垂直排列時(shí)（flex-direction: column | column-reverse）

1: wrap 會(huì)按照從左到右的順序，依次生成新的列
2: wrap 會(huì)按照從有到左的順序，依次生成新的列

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

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

相關(guān)文章

  • HTML、CSS知識(shí)學(xué)習(xí)與整理

    摘要：命名規(guī)范類型對(duì)象如。常量命名方式全部大寫。子容器在交叉軸的排列方向。交叉軸的起點(diǎn)對(duì)齊交叉軸的終點(diǎn)對(duì)齊交叉軸的中點(diǎn)對(duì)齊交叉軸的兩端對(duì)齊，軸線間隔平均分布軸線兩側(cè)間隔相等默認(rèn)值，軸線占滿整個(gè)交叉軸。命名1.駝峰式命名法：(1) 大駝峰命名法：首字母大寫。(2) 小駝峰命名法：首字母小寫。2.文件資源命名：(1) 不得含有空格。(2) 建議只使用小寫字母，除了某些為說明文件的情況（如 README...

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

  • HTML、CSS知識(shí)學(xué)習(xí)與整理

    摘要：命名規(guī)范類型對(duì)象如。常量命名方式全部大寫。子容器在交叉軸的排列方向。交叉軸的起點(diǎn)對(duì)齊交叉軸的終點(diǎn)對(duì)齊交叉軸的中點(diǎn)對(duì)齊交叉軸的兩端對(duì)齊，軸線間隔平均分布軸線兩側(cè)間隔相等默認(rèn)值，軸線占滿整個(gè)交叉軸。命名1.駝峰式命名法：(1) 大駝峰命名法：首字母大寫。(2) 小駝峰命名法：首字母小寫。2.文件資源命名：(1) 不得含有空格。(2) 建議只使用小寫字母，除了某些為說明文件的情況（如 README...

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

  • 深入解析CSS FlexBox

    摘要：如果用動(dòng)畫來表現(xiàn)，可以看出拉長(zhǎng)的時(shí)候紅色會(huì)變得比藍(lán)色長(zhǎng)，但壓縮的時(shí)候卻是藍(lán)色變得比紅色長(zhǎng)，如此一來就更能體會(huì)在響應(yīng)式設(shè)計(jì)里頭的關(guān)鍵角色。 Flexbox是一個(gè)CSS3的盒子模型（box model），顧名思義它就是一個(gè)靈活的盒子（Flexible Box）。 Flexbox模型概念 第一步要來看Flexbox的盒子模型，根據(jù)W3C文章所描述，flex的盒子模型如下圖所呈現(xiàn)，與一般的盒子...

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

  • 深入解析CSS FlexBox

    摘要：如果用動(dòng)畫來表現(xiàn)，可以看出拉長(zhǎng)的時(shí)候紅色會(huì)變得比藍(lán)色長(zhǎng)，但壓縮的時(shí)候卻是藍(lán)色變得比紅色長(zhǎng)，如此一來就更能體會(huì)在響應(yīng)式設(shè)計(jì)里頭的關(guān)鍵角色。 Flexbox是一個(gè)CSS3的盒子模型（box model），顧名思義它就是一個(gè)靈活的盒子（Flexible Box）。 Flexbox模型概念 第一步要來看Flexbox的盒子模型，根據(jù)W3C文章所描述，flex的盒子模型如下圖所呈現(xiàn)，與一般的盒子...

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

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

0條評(píng)論

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