国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css flex => flex-wrap

BWrong / 1257人閱讀

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

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

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

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

//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去掉（去掉之后會默認平均地分配寬），所以我們的css需要改變的部分是：

//只有.item改變為
.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

總結：
當flex元素水平排列時（flex-direction: row | row-reverse）

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

當flex元素為垂直排列時（flex-direction: column | column-reverse）

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

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

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

相關文章

  • HTML、CSS知識學習與整理

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

    pcChao 評論0 收藏0

  • HTML、CSS知識學習與整理

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

    crelaber 評論0 收藏0

  • 深入解析CSS FlexBox

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

    gplane 評論0 收藏0

  • 深入解析CSS FlexBox

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

    shinezejian 評論0 收藏0

發表評論

0條評論

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