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实现表单验证效果(非常不错)
Jan 18 HTML / CSS
CSS教程:CSS3圆角属性
Apr 02 HTML / CSS
CSS3实现银灰色动画效果的导航菜单代码
Sep 01 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
Jan 06 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
HTML5操作WebSQL数据库的实例代码
Aug 26 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
Jun 03 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 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去除重复字的实现代码
2011/09/16 PHP
PHP中读写文件实现代码
2011/10/20 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
javascript使用location.search的示例
2013/11/05 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
javascript实现滑动解锁功能
2017/03/22 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
Vant 中的Toast设置全局的延迟时间操作
2020/11/04 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
用python实现面向对像的ASP程序实例
2014/11/10 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
python装饰器代替set get方法实例
2019/12/19 Python
Python查找不限层级Json数据中某个key或者value的路径方式
2020/02/27 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
通信工程毕业生自荐信
2013/11/01 职场文书
前台文员岗位职责
2013/12/28 职场文书
海飞丝广告词
2014/03/20 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
绘画专业自荐信
2014/07/04 职场文书
励志演讲稿600字
2014/08/21 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
2014年综合治理工作总结
2014/11/20 职场文书