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属性box-sizing使用指南
Dec 09 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 HTML / CSS
字中字效果的实现【html5实例】
May 03 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 HTML / CSS
CSS代码检查工具stylelint的使用方法详解
Mar 27 HTML / CSS
POST提交数据常见的四种方式
Jan 18 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
simplehtmldom Doc api帮助文档
2012/03/26 PHP
php中hashtable实现示例分享
2014/02/13 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
Laravel修改验证提示信息为中文的示例
2019/10/23 PHP
jquery ajax请求实例深入解析
2012/11/26 Javascript
让图片旋转任意角度及JQuery插件使用介绍
2013/03/20 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
基于vue v-for 循环复选框-默认勾选第一个的实现方法
2018/03/03 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
什么是GWT的Module
2013/01/20 面试题
慈善捐赠倡议书
2014/08/30 职场文书
2019年怎样才能撰写出优秀的自荐信
2019/03/25 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android
Linux中sftp常用命令整理
2022/06/28 Servers