css flex => flex-wrap

BWrong 发布于2019-08-29 13:14 / 1211人阅读

摘要：的元素默会默认充满一行或者一列，但是当你给他们的设置了之后情况就会不一样了。可以接受三个值所有的元素充满一行或者一列。

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 会按照从有到左的顺序，依次生成新的列

GPU云服务器云服务器 CSS_Flex flex flex40 flex 教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112468.html

HTML、CSS知识学习与整理

摘要：命名规范类型对象如。常量命名方式全部大写。子容器在交叉轴的排列方向。交叉轴的起点对齐交叉轴的终点对齐交叉轴的中点对齐交叉轴的两端对齐，轴线间隔平均分布轴线两侧间隔相等默认值，轴线占满整个交叉轴。命名1.驼峰式命名法：(1) 大驼峰命名法：首字母大写。(2) 小驼峰命名法：首字母小写。2.文件资源命名：(1) 不得含有空格。(2) 建议只使用小写字母，除了某些为说明文件的情况（如 README...

pcChao 2019-08-29 15:18 评论0 收藏0
HTML、CSS知识学习与整理

摘要：命名规范类型对象如。常量命名方式全部大写。子容器在交叉轴的排列方向。交叉轴的起点对齐交叉轴的终点对齐交叉轴的中点对齐交叉轴的两端对齐，轴线间隔平均分布轴线两侧间隔相等默认值，轴线占满整个交叉轴。命名1.驼峰式命名法：(1) 大驼峰命名法：首字母大写。(2) 小驼峰命名法：首字母小写。2.文件资源命名：(1) 不得含有空格。(2) 建议只使用小写字母，除了某些为说明文件的情况（如 README...

crelaber 2019-08-02 10:23 评论0 收藏0
深入解析CSS FlexBox

摘要：如果用动画来表现，可以看出拉长的时候红色会变得比蓝色长，但压缩的时候却是蓝色变得比红色长，如此一来就更能体会在响应式设计里头的关键角色。 Flexbox是一个CSS3的盒子模型（box model），顾名思义它就是一个灵活的盒子（Flexible Box）。 Flexbox模型概念第一步要来看Flexbox的盒子模型，根据W3C文章所描述，flex的盒子模型如下图所呈现，与一般的盒子...

gplane 2019-08-02 16:16 评论0 收藏0
深入解析CSS FlexBox

摘要：如果用动画来表现，可以看出拉长的时候红色会变得比蓝色长，但压缩的时候却是蓝色变得比红色长，如此一来就更能体会在响应式设计里头的关键角色。 Flexbox是一个CSS3的盒子模型（box model），顾名思义它就是一个灵活的盒子（Flexible Box）。 Flexbox模型概念第一步要来看Flexbox的盒子模型，根据W3C文章所描述，flex的盒子模型如下图所呈现，与一般的盒子...

shinezejian 2019-08-30 10:48 评论0 收藏0