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

  • 长期零申报的公司容易注销吗
  • 待抵扣进项税的账务处理
  • 税收契子怎么算
  • 税务问答网站
  • 股票初始计量后按新金融准则计入哪个科目
  • 一般纳税人开普票多少个点
  • 不单独计价的包装物是什么意思
  • 理财产品分红和不分红的区别
  • 防火门属于固定式防火风格
  • 多计提个税怎么办
  • 季度的工会经费计税依据
  • 实收资本增加的原因
  • 系统集成 税点
  • 非独生子女赡养老人专项附加扣除的标准
  • 购进财务软件折旧怎么算
  • 属于会计核算方法的
  • 差额拨款的事业单位属于预算单位吗
  • 房地产企业用电计入什么科目
  • 服务费公司的账务处理
  • 税务系统勾了为什么还能认证?
  • 水利建设专项收入怎么计算
  • 信托公司如何投资
  • 承兑到期不兑付应起诉哪方?
  • 应收代位偿款
  • 管理不善存货损失 企业所得税
  • 股东借款作为资本金投入
  • 发票有问题找谁
  • 待处理财产损益的二级科目
  • 低价销售存货的企业所得税怎么算
  • 视同销售怎么做账务处理
  • NPFMSG.exe - NPFMSG是什么进程 有什么用
  • php页面传值
  • 网页读出来
  • 百合花怎么养殖简单
  • 公司与个人的往来款怎么处理
  • 租赁固定资产成本怎么算
  • 内账怎么处理增值税
  • 货物运输业增值税专用发票
  • php pdo sqlserver
  • 报税货物范围包括
  • 出差餐补如何做账
  • 盘亏结转
  • jdbc连接mysql的url怎么写
  • 建筑企业其他应付款
  • 宝塔运行go
  • 增值税进项税如何申报
  • 商铺转让费的会计分录
  • shell取命令执行结果
  • 预付房租摊销从哪月算起
  • 增值税一般纳税人登记管理办法
  • 食堂采购原材料怎么在赣溯源备案
  • 发票一直没验旧会有什么影响
  • 不良品扣款会计分录
  • 个税里的年金是指
  • 补开以前的发票可以抵企业所得税吗?
  • 期初建帐
  • 机票退票费计入什么科目
  • 税控盘被锁死
  • 诉讼代理费计入成本吗
  • 怎么样打印自己想要的内容
  • 增值税专用发票使用规定 最新
  • 利润表持续经营净利润怎么算
  • 农产品没有发票怎么办
  • 计提资产减值是好事还是坏事
  • centos怎么设置
  • 苹果mac系统怎么安装pip工具
  • win7系统安装教程不用u盘
  • win8远程桌面连接设置
  • 查找linux
  • jquery图片自动滚动
  • jqueryui dialog
  • shell python
  • android下载文件保存到本地
  • android 材料设计
  • 安徽省国家税务总局电子税务局
  • 天津武清房管局电话
  • 陕西税务管网
  • 广东电子税务局官网登录入口手机版
  • 开票日期是今年但是业务是去年
  • 工程合同可以违背国家规范吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设