亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

css flex => flex-wrap

BWrong / 1343人閱讀

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

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

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

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

//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

因為接下來是按照列的排列情況，所以我們要給每一個flex元素一個height，把width去掉（去掉之后會默認(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元素水平排列時（flex-direction: row | row-reverse）

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/112468.html

相關(guān)文章

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

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

    pcChao 評論0 收藏0

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

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

    crelaber 評論0 收藏0

  • 深入解析CSS FlexBox

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

    gplane 評論0 收藏0

  • 深入解析CSS FlexBox

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

    shinezejian 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<