flex布局中使用flex-wrap实现换行的项目实践


Posted in HTML / CSS onJune 21, 2022

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

参考资料 flex-wrap

开始样式

flex布局中使用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 实现换行

flex布局中使用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的样式

flex布局中使用flex-wrap实现换行的项目实践

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

垂直换行 flex-flow

简写属性 flex-flow

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

flex布局中使用flex-wrap实现换行的项目实践

<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个一行

flex布局中使用flex-wrap实现换行的项目实践

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

.planItem {
    flex: 50%;
}

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

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

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

flex布局中使用flex-wrap实现换行的项目实践

.planItem {
    flex: 40%;
    margin-right: 10px;
}

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

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

完事的结束语 ^ _ ^

到此这篇关于flex布局中使用flex-wrap实现换行的项目实践的文章就介绍到这了,更多相关flex-wrap实现换行内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
使用CSS3制作响应式导航菜单的方法
Jul 12 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
使用HTML5的表单验证的简单示例
Sep 09 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 HTML / CSS
css3手动实现pc端横向滚动
Jun 21 #HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 #HTML / CSS
css如何把元素固定在容器底部的四种方式
css中有哪些方式可以隐藏页面元素及区别
Jun 16 #HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 #HTML / CSS
css样式important规则的正确使用方式
Jun 10 #HTML / CSS
分享几个实用的CSS代码块
Jun 10 #HTML / CSS
You might like
Zend引擎的发展 [15]
2006/10/09 PHP
php的字符串用法小结
2010/06/08 PHP
在PHP中利用wsdl创建标准webservice的实现代码
2011/12/07 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
2014/01/25 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
JS+canvas五子棋人机对战实现步骤详解
2020/06/04 Javascript
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
Python中用Decorator来简化元编程的教程
2015/04/13 Python
解决pandas 作图无法显示中文的问题
2018/05/24 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
Python字典遍历操作实例小结
2019/03/05 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
职工运动会感言
2014/02/07 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
师德师风事迹材料
2014/12/20 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
导游词之山海关
2019/12/10 职场文书
Java时间工具类Date的常用处理方法
2022/05/25 Java/Android
redis protocol通信协议及使用详解
2022/07/15 Redis