位置: 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噬菌体疗法将为重症感染患者带来福音

  • 印花税计算是含增值税吗
  • 个人所得税如何查询工资
  • 业务招待费和广告费扣除标准
  • 总公司和子公司可以有业务往来吗
  • 小企业一定要买五险吗
  • 银联撤销交易步骤
  • 查找出资产负债表的软件
  • 小规模没有成本票怎么做账
  • 购买金税盘抵扣
  • 运输发票备注怎么填
  • 预售房款预缴增值税
  • 股东无偿借款给公司需要交税吗
  • 银行漏记账会造成什么后果
  • 增值税价外费用如何开票
  • 工资未发放是否可以仲裁
  • 查账征收所得税计税依据
  • 不动产权时间怎么确认
  • 固定资产加速折旧最新政策2023
  • 没有销项税进项要交税吗
  • 员工出差买的保险怎么入账
  • 不同方式的融资租赁业务如何贴花?
  • 积分全部换购商品是什么
  • 暂估人工成本分录怎么写
  • 企业所得税汇算清缴表
  • win10错误代码0xc0000001
  • 关于激活函数的说法错误的是
  • php 字符串函数
  • php数组函数有哪些
  • 付不出去的应付账款如何写说明书
  • 固定资产如何做账务处理
  • Vant UI 中 van-collapse 下拉折叠面板如何默认展开第一项
  • php wechat
  • 移动端h5页面适配
  • centos下file_put_contents()无法写入文件的原因及解决方法
  • 股东分红应该在哪个科目
  • 二次封装机
  • 动态内存管理
  • vue笔记大全
  • 报关单在哪里打出来
  • 织梦怎么导入数据库
  • 出差补贴是额外的吗
  • 织梦怎么采集文章
  • 基于vue的开源甘特图控件
  • 帝国cms怎么调用文章随机段落
  • python缩进有什么作用
  • 接受现金资产投资会引起实收资本增加吗
  • 企业变更股东需要什么手续
  • 印花税申报怎么填
  • 固定资产折旧和无形资产摊销
  • 借款与报销流程设计
  • 固定电话机用装电池吗
  • 以前年度错误账务处理
  • 企业的借款利息费用,扣除标准是?
  • 小规模纳税人所得税计算
  • 第三方支付利息
  • 收到税务局退增值税怎么入账
  • 人工安装费是几个点税税率
  • 公司想自己开发票怎么申请
  • 安装sql server 2008硬件要求
  • 苹果今日报价
  • debian更改用户名
  • Red Hat Enterprise Linux 5.X的图形安装教程
  • 如何设置自动删除安装包
  • 应用商店如何更新软件
  • mac文件怎么用
  • shpc32.exe - shpc32是什么进程 有什么用
  • window10如何修改电脑名称
  • jquery 使用
  • bootstrap弹出表单
  • node的express
  • android基础入门
  • De facto standard 世界上不可思议的事实标准
  • typescript concat
  • javascript gui
  • jQuery Ajax 加载数据时异步显示加载动画
  • 国家税务总局2018年61号公告
  • CA证书如何办理?
  • 滞留票税务局会罚款多少
  • 社保在哪里缴费
  • 哪些账本需要贴纸
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设