flex布局中使用flex-wrap实现换行

最近做个项目,其中有个样式是换行布局,作为样式渣渣的我一开始不会,只能查资料,然后摆平了它.今天得空了,简要记录一下,方便后面小伙伴布局使用.

参考资料 flex-wrap

开始样式

<div class="planWrap"><div class="content planItem">1</div><div class="content planItem">2</div><div class="content planItem">3</div><div class="content planItem">4</div><div class="content planItem">5</div><div class="content planItem">6</div>
</div><style>
.content {background: red;line-height:50px;height: 50px;width: 50px;text-align: center;margin-top:5px
}.planWrap {width: 160px;height: 200px;border: 1px solid;display:flex;
}</style>

flex-wrap 实现换行

<style>
.planWrap {width: 160px;height: 200px;border: 1px solid;display:flex;flex-wrap: wrap;
}
</style>

说明:
1.flex-wrap 属性指定 flex 元素单行显示还是多行显示,该属性接受以下取值:

nowrap: 元素都放在一行,也是默认属性值;
wrap:元素放到多行;
wrap-reverse: 和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。(如下图展示更直观)

2.上面有提及wrap-reverse,展示一下wrap-reverse的样式

<style>
.planWrap {width: 160px;height: 200px;border: 1px solid;display:flex;flex-wrap: wrap-reverse;
}
</style>

垂直换行 flex-flow 简写属性 flex-flow

上面的都是行分布,现在我想要垂直分布且换行

<style>
.planWrap {width: 160px;height: 200px;border: 1px solid;display:flex;flex-wrap: wrap;flex-direction: column;
}
</style>

通过flex-direction指定排列方向,flex-wrap制定是否换行;不过这样写多少有点麻烦,可以使用flex-flow来进行简写

// 第一个指定的值为 flex-direction ，第二个指定的值为 flex-wrap.
flex-flow: flex-direction flex-wrap

<style>
.planWrap {width: 160px;height: 200px;border: 1px solid;display:flex;flex-flow:column wrap;
}
</style>

3个一行变为2个一行 Flex属性的简写

现在我不仅希望能换行,我还希望能2个一行

.planWrap {width: 160px;height: 200px;border: 1px solid;display:flex;flex-flow:row wrap;
}.planItem {flex: 50%;
}

这里面使用了flex属性,flex可以指定元素占据的百分比或者固定宽度,具体可以见上面文档,就不详细说明了.

nth-child 指定一些元素特定属性

现在我希望两个div直接间距10px,但是后面一个元素没有间距

.planItem {flex: 40%;margin-right: 10px;
}.planItem:nth-child(2n) {margin-right: 0px;
}

首先指定了margin-right,所以我将flex百分比调小,然后使用了nth-child修改偶数位的元素.

完事的结束语 ^ _ ^

到这为止,我需要的样式就出现了,希望这篇简单的文章能为之后需要分行布局的小伙伴提供一些借鉴的地方.

flex布局中使用flex-wrap实现换行相关推荐

Flex布局中的flex属性
1.flex-grow,flex-shrink,flex-basis取值含义 flex-grow: 延申性描述.在满足"延申条件"时,flex容器中的项目会按照设置的flex-gr ...
演示和解析Flex布局中的各种属性
文章目录文章导读一.justify-content center flex-start flex-end space-around space-evenly space-between 二.ali ...
html子布局不超出父布局,详解flex布局中保持内容不超出容器的解决办法
在移动端,flex 布局很好用,它能够根据设备宽度来自动调整容器的宽度,用起来很方便,已经越来越离不开它,但是最近在做项目的时候发现一个问题. 就是在一个设置了 flex:1 的容器中,如果文字很长, ...
flex布局中 text-overflow:ellipsis 失效
1 问题描述 HTML: <div id="container"><span class="box"><p>box1< ...
Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...
网页HTML5制作flex布局骰子,css3 flex布局结合transform生成一个3D骰子
1 Flex 布局首先聊聊Flex 布局,Flex 布局又称"弹性布局",任何容器都可以指定为Flex布局,设置Flex布局会使得子元素的float.clear.vertical ...
ArcGIS Flex API 中的 Flex 技术（一）--事件
作者:Flyingis 本文严禁用于商业目的,如需转载请注明作者及原文链接,其他疑问请联系:dev.vip#gmail.com 在ArcGIS Flex API中探索Flex使用是一种不错的学习方法, ...
html flex布局换行,flex布局中的换行究竟是怎么使用的？
该楼层疑似违规已被系统折叠隐藏此楼查看此楼图片布局实现测试1 *{padding: 0;margin: 0;} html,body{ /*height: 100%;*/ background-co ...
在html5中flex布局详解,Flex布局详解（一）
在讲解Flex布局之前,我们首先可以回顾一下我们平时在做行向布局或者纵向布局时候我们页面的布局主要用到哪些布局方法或者思路. 1.normal flow (正常流,也叫文档流)--内联元素从左往右排列 ...
flex布局中，保持内容不超出容器的解决办法
本文转载链接:https://blog.csdn.net/zgh0711/article/details/78270555 在移动端,flex 布局很好用,它能够根据设备宽度来自动调整容器的宽度,用起 ...