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背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
CSS3中的clip-path使用攻略
Aug 03 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
css3的过滤效果简单实例
Aug 03 HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
HTML5 表单验证失败的提示语问题
Jul 13 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
Mar 10 HTML / CSS
canvas实现滑动验证的实现示例
Aug 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伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
PHP 强制下载文件代码
2010/10/24 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
2015/10/17 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
javascript中的面向对象
2017/03/30 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
Python实现堆排序的方法详解
2016/05/03 Python
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
Python实现单词翻译功能
2017/06/06 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
python实现画循环圆
2019/11/23 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
Django中ORM的基本使用教程
2020/12/22 Python
Django如何重置migration的几种情景
2021/02/24 Python
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
html5读取本地文件示例代码
2014/04/22 HTML / CSS
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
销售总监岗位职责
2014/01/04 职场文书
大学生实习感言
2014/01/16 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
草房子读书笔记
2015/06/29 职场文书
小学体育课教学反思
2016/02/16 职场文书
GO中sync包自由控制并发示例详解
2022/08/05 Golang