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使用多列制作瀑布流
May 10 HTML / CSS
详解纯CSS3制作的20种loading动效
Jul 05 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
Dec 08 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
纯HTML5+CSS3制作生日蛋糕代码
Nov 16 HTML / CSS
HTML5 实战PHP之Web页面表单设计
Oct 09 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 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文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
js实现简单的选项卡效果
2017/02/23 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
2017/07/08 jQuery
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Python读取图片为16进制表示简单代码
2018/01/19 Python
python模拟表单提交登录图书馆
2018/04/27 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python 中xpath爬虫实例详解
2019/08/26 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
Python 串口通信的实现
2020/09/29 Python
工作证明范本(2篇)
2014/09/14 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
同意报考公务员证明
2015/06/17 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
详解Python requests模块
2021/06/21 Python
详解Vue slot插槽
2021/11/20 Vue.js
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL