位置: IT常识 - 正文

flex布局中使用flex-wrap实现换行(flex布局教程实例篇)

编辑:rootadmin
flex布局中使用flex-wrap实现换行

推荐整理分享flex布局中使用flex-wrap实现换行(flex布局教程实例篇),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:flex布局教程实例篇,flex布局flex:1,flex布局教程实例篇,flex布局用法,flex布局如何使用,flex布局教程实例篇,flex布局如何使用,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 实现换行

<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 互换。(如下图展示更直观)flex布局中使用flex-wrap实现换行(flex布局教程实例篇)

2.上面有提及wrap-reverse,展示一下wrap-reverse的样式

<style>.planWrap { width: 160px; height: 200px; border: 1px solid; display:flex; flex-wrap: wrap-reverse;}</style>垂直换行 flex-flow 简写属性 flex-flow

上面的都是行分布,现在我想要垂直分布且换行

<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个一行

.planWrap { width: 160px; height: 200px; border: 1px solid; display:flex; flex-flow:row wrap;}.planItem { flex: 50%;}

这里面使用了flex属性,flex可以指定元素占据的百分比或者固定宽度,具体可以见上面文档,就不详细说明了.

nth-child 指定一些元素特定属性

现在我希望两个div直接间距10px,但是后面一个元素没有间距

.planItem { flex: 40%; margin-right: 10px;}.planItem:nth-child(2n) { margin-right: 0px;}

首先指定了margin-right,所以我将flex百分比调小,然后使用了nth-child修改偶数位的元素.

完事的结束语 ^ _ ^

到这为止,我需要的样式就出现了,希望这篇简单的文章能为之后需要分行布局的小伙伴提供一些借鉴的地方.

本文链接地址:https://www.jiuchutong.com/zhishi/297460.html 转载请保留说明!

上一篇:Nginx静态资源部署(nginx搭建静态资源服务器)

下一篇:Nat Biotechnol –精准 CRISPR-Cas噬菌体疗法将为重症感染患者带来福音

  • 小米电视内置小爱同学怎么用(小米电视内置小爱有什么功能)

    小米电视内置小爱同学怎么用(小米电视内置小爱有什么功能)

  • 淘宝有哪些活动日(淘宝有哪些活动可以报名)

    淘宝有哪些活动日(淘宝有哪些活动可以报名)

  • 手机无缘无故发出短信(手机无缘无故发出拍照的声音)

    手机无缘无故发出短信(手机无缘无故发出拍照的声音)

  • 11年前的通话记录能找到吗(多年前的通话记录)

    11年前的通话记录能找到吗(多年前的通话记录)

  • 苹果7屏幕尺寸多大(苹果7屏幕尺寸是多少英寸)

    苹果7屏幕尺寸多大(苹果7屏幕尺寸是多少英寸)

  • 苹果2b/a是哪个国家(苹果型号2b/a什么意思)

    苹果2b/a是哪个国家(苹果型号2b/a什么意思)

  • 电磁波辐射屏蔽方法(电磁波辐射屏蔽帽)

    电磁波辐射屏蔽方法(电磁波辐射屏蔽帽)

  • 什么是京东客(什么是京东客户端用户)

    什么是京东客(什么是京东客户端用户)

  • 小米能识别到卡但是没信号(小米能识别到卡里的钱吗)

    小米能识别到卡但是没信号(小米能识别到卡里的钱吗)

  • 手提电脑为什么连接不上WIFI(手提电脑为什么连不上手机热点)

    手提电脑为什么连接不上WIFI(手提电脑为什么连不上手机热点)

  • 为什么苹果手机上面一排不显示了(为什么苹果手机wifi变成灰色按不了)

    为什么苹果手机上面一排不显示了(为什么苹果手机wifi变成灰色按不了)

  • 手机美图秀秀消除文字(手机美图秀秀消除笔)

    手机美图秀秀消除文字(手机美图秀秀消除笔)

  • 微信里面的视频号是什么(微信里面的视频号是怎么出来的)

    微信里面的视频号是什么(微信里面的视频号是怎么出来的)

  • cpu速度是指什么(cpu的速度用什么单位)

    cpu速度是指什么(cpu的速度用什么单位)

  • oppo手机如何开机(oppo手机如何开通volte功能)

    oppo手机如何开机(oppo手机如何开通volte功能)

  • wps触发器怎么设置(wps触发器怎么使用)

    wps触发器怎么设置(wps触发器怎么使用)

  • 荣耀9x出现新版本要不要更新(荣耀9x新版本怎么样)

    荣耀9x出现新版本要不要更新(荣耀9x新版本怎么样)

  • 苹果limited warranty什么意思(苹果官网)

    苹果limited warranty什么意思(苹果官网)

  • 旁白模式怎么输密码(旁白模式怎么输密码不对怎么办)

    旁白模式怎么输密码(旁白模式怎么输密码不对怎么办)

  • 4g网络怎么变成5g网络(4g网络怎么变成5g网络代码)

    4g网络怎么变成5g网络(4g网络怎么变成5g网络代码)

  • Mac双系统的切换以及设置系统默认启动的几种方法(mac双系统切换键)

    Mac双系统的切换以及设置系统默认启动的几种方法(mac双系统切换键)

  • ElementPlusError:[ElPagination] 你使用了一些已被废弃的用法,请参考 el-pagination 的官方文档

    ElementPlusError:[ElPagination] 你使用了一些已被废弃的用法,请参考 el-pagination 的官方文档

  • 基于pyecharts的中医药知识图谱可视化(pyecharts怎么用)

    基于pyecharts的中医药知识图谱可视化(pyecharts怎么用)

  • 分公司非独立核算
  • 鲜花虫草开发票属于什么类别?
  • 个税代扣代缴手续费返还 申请
  • 企业亏损结转年限举例说明
  • 百望云票收费吗
  • 财务记账之后是否必须审核
  • 租入住房用于职工福利,进项转出吗?
  • 建筑业工人工资保障
  • 共用的水电费支出怎么算
  • 材料验收入库款项尚未支付
  • 补提折旧以前年度损益调整汇算清缴怎么处理
  • 公司给员工发的工资要交税吗
  • 电子发票隔月可以报销吗
  • 支付行业招商方案
  • 红字增值税专用发票信息表怎么填
  • 直接人工属于哪个科目
  • 增值税普票可以抵扣税吗
  • 测量仪器进工程成本的什么科目?
  • 生育津贴支付方式
  • 调整以前年度企业所得税会计分录
  • win10老是错误
  • mac如何打电话
  • 公司取得的发明专利
  • win11怎么创建新用户
  • 其他应付款年末怎么结转
  • 房地产开发公司组织架构
  • 固定资产的主要特征有哪些
  • win7无法打开打印机
  • 软件企业职工培训费税前扣除标准
  • 先开票还是先付款最新规定
  • 成品油发票当月冲红
  • 分页显示怎么实现
  • php数组中某个元素出现的个数
  • php curl_init
  • php跳转微信支付
  • command对象可以执行sql语句吗
  • 工作被取代
  • 购税盘分录
  • 《一文搞懂IoU发展历程》GIoU、DIoU、CIoU、EIoU、αIoU、SIoU
  • 目标检测yolo
  • php中array用法
  • 小规模企业应交税费
  • 现金股利要交税
  • 主营业务收入含义
  • 一直暂估原材料有什么风险
  • 企业按行业划分可划分为哪些
  • mysql 忘记密码重置密码
  • sqlserver的isnull
  • 个人独资公司对外如何承担责任
  • 补贴收入是否交印花税
  • 摊销期在一年以内房租的账务处理
  • 代开增值税额与实际缴款额差一分钱如何入账?
  • 给员工缴纳的雇工保险
  • 停产期间发生的事故
  • 主营业务成本暂估怎么算
  • 中央空调的维护费一年要多少钱?
  • 什么企业属于小型微利企业
  • 如何更换会计账号
  • sql server 自增列设置语句
  • mysql隔离级别详解
  • win7系统怎么运行xp系统的软件
  • windows7升级到windows8.1
  • 安装fedora进入不到安装界面
  • win10设置设备
  • 教你如何解决蓝光机/KODI无法打开局域网smb共享的问题
  • Win10 Build 10586.494稳定版更新修复内容以及KB3172985补丁下载地址
  • WIN10专业版怎么查看操作位数
  • Linux中RedHat CentOS Ubuntu Fedora的区别详解
  • win10网卡驱动不正常连不上网怎么办
  • Linux上PPTP VPN的一键安装以及设置开机启动的方法
  • win10怎么启用网卡
  • perl 教程
  • Js组件开发方式
  • 批处理常用命令总结
  • javascript运用
  • javascript的
  • jquery给输入框赋值
  • 烟叶税属于中央税还是地方税
  • 销售哪些产品需办许可证
  • 云南医保可以网上买药吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设