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截图_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
Mar 05 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
Jan 12 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 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中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
php实现的双色球算法示例
2017/06/20 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
JS实现的省份级联实例代码
2013/06/24 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
详解python时间模块中的datetime模块
2016/01/13 Python
特征脸(Eigenface)理论基础之PCA主成分分析法
2018/03/13 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
一套中级Java程序员笔试题
2015/01/14 面试题
幼儿园园长岗位职责
2013/11/26 职场文书
法学个人求职信范文
2014/01/27 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
PHP基本语法
2021/03/31 PHP
20180830晚上第一届KSL半决赛 雨神vs解冻(二龙 三炮解说)
2022/04/01 星际争霸
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python