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动画(开启gpu加速)
Dec 23 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
css3 transform属性详解
Sep 30 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
CSS3中Transition动画属性用法详解
Jul 04 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
简单实现一个手持弹幕功能+文字抖动特效
Mar 31 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
php 表单验证实现代码
2009/03/10 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
浅析is_writable的php实现
2013/06/18 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
Centos7 Yum安装PHP7.2流程教程详解
2019/07/02 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
JS实现Fisheye效果动感放大菜单代码
2015/10/21 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
Python模拟登录12306的方法
2014/12/30 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
详解supervisor使用教程
2017/11/21 Python
浅谈python3中input输入的使用
2019/08/02 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
丝芙兰新加坡官网:Sephora新加坡
2018/12/04 全球购物
早会开场白台词大全
2015/06/01 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle
java协程框架quasar和kotlin中的协程对比分析
2022/02/24 Java/Android
muduo TcpServer模块源码分析
2022/04/26 Redis
SQL SERVER中的流程控制语句
2022/05/25 SQL Server