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

  • realme手机忘记锁屏密码怎么解锁(realme手机忘记锁屏密码也清除不了数据怎么办)

    realme手机忘记锁屏密码怎么解锁(realme手机忘记锁屏密码也清除不了数据怎么办)

  • honor play4t pro可以隐藏应用吗(honor play4t pro可以换内储256存储卡)

    honor play4t pro可以隐藏应用吗(honor play4t pro可以换内储256存储卡)

  • 在手机上怎么发微博(在手机上怎么发送qq邮件)

    在手机上怎么发微博(在手机上怎么发送qq邮件)

  • 快手官方一般多少播放量就可以上热门(快手官网多少)

    快手官方一般多少播放量就可以上热门(快手官网多少)

  • 苹果手机照片打不开咋回事(苹果手机照片打码怎么弄)

    苹果手机照片打不开咋回事(苹果手机照片打码怎么弄)

  • 拼多多商标证号是什么(拼多多商品商标证号怎么填写)

    拼多多商标证号是什么(拼多多商品商标证号怎么填写)

  • vivo哪个系列是高端机(vivo哪个系列是拍照的)

    vivo哪个系列是高端机(vivo哪个系列是拍照的)

  • realtek高清晰音频管理器有什么用(realtek高清晰音频管理器没有声音)

    realtek高清晰音频管理器有什么用(realtek高清晰音频管理器没有声音)

  • 手机上天气和时间为什么不显示了(手机上天气和时间怎么设置显示的)

    手机上天气和时间为什么不显示了(手机上天气和时间怎么设置显示的)

  • iphone镜像怎么关(怎么关苹果镜像)

    iphone镜像怎么关(怎么关苹果镜像)

  • qq头像变企鹅怎么恢复(qq头像变企鹅怎么回事)

    qq头像变企鹅怎么恢复(qq头像变企鹅怎么回事)

  • win7引用的账户当前已锁定(win7引用的账户已锁定且可能无法登录 没有输错密码)

    win7引用的账户当前已锁定(win7引用的账户已锁定且可能无法登录 没有输错密码)

  • 因特网的拓扑结构是什么(因特网的拓扑结构是一种什么结构)

    因特网的拓扑结构是什么(因特网的拓扑结构是一种什么结构)

  • 收音机air是什么频道(收音机ir是什么意思)

    收音机air是什么频道(收音机ir是什么意思)

  • vivo手机运行内存怎么清理(vivo手机运行内存12+8是什么意思)

    vivo手机运行内存怎么清理(vivo手机运行内存12+8是什么意思)

  • 抖音关注太快多久恢复(抖音关注太快多久才能继续)

    抖音关注太快多久恢复(抖音关注太快多久才能继续)

  • game boost开还是不开(game boost开不开)

    game boost开还是不开(game boost开不开)

  • 十大常见的内存BIOS故障现象及解决方案(常见内存大小)

    十大常见的内存BIOS故障现象及解决方案(常见内存大小)

  • 海草中的章鱼,法国利翁湾 (© BIOSPHOTO/Alamy)(在海里的章鱼)

    海草中的章鱼,法国利翁湾 (© BIOSPHOTO/Alamy)(在海里的章鱼)

  • VUE项目运行失败原因以及解决办法(以vscode为例)(vue项目运行报错)

    VUE项目运行失败原因以及解决办法(以vscode为例)(vue项目运行报错)

  • 前端项目部署,阿里云服务器部署前端项目,超详细(前端项目部署到nginx)

    前端项目部署,阿里云服务器部署前端项目,超详细(前端项目部署到nginx)

  • 什么是增值税的混合销售行为
  • 购销合同印花税按70%
  • 中税协网站怎样补学时
  • 进口关税怎么做分录
  • 怎么收购股份公司
  • 水泥建材公司
  • 旅游企业纳税
  • 纳税人的住房租金专项附加扣除标准有
  • 职工福利费开了没有发票
  • 处置无形资产取得的收入计入
  • 办理企业所得税汇算清缴的期限是
  • 职工暖气费报销算福利
  • 税收完税证明分为几种
  • 土地价值是否计入GDP
  • 国外预提税是什么
  • 重庆个人住房房产税申报
  • 在建工程的折旧费计入什么科目
  • 小规模纳税人减免税明细表怎么填
  • 违约金扣除吗
  • 小规模纳税人别人开了专票怎样处理
  • 办公用品普通发票的会计分录
  • 已计提月份的公式
  • 简单介绍linux
  • 新版edge浏览器如何恢复设置
  • win11专业版企业版家庭版哪个玩游戏好
  • 升级鸿蒙系统后
  • 房子按季度收取租金,怎么交房产税
  • 长期待摊费用是当月摊销还是次月摊销
  • 如何解决win7系统卡顿
  • 公司装修款怎么做分录
  • php pack
  • PHP:pg_unescape_bytea()的用法_PostgreSQL函数
  • PHP:pg_send_execute()的用法_PostgreSQL函数
  • 冲销去年多计提所得税怎么做
  • PHP:date_default_timezone_set()的用法_Date Time函数
  • 出口货物退免税证明办税进度
  • php使用什么开发工具
  • phptoken验证原理
  • 哈士奇新手礼包
  • 国企无偿划转股权免印花税
  • 住房公积金的账号怎么查询
  • 代扣代缴境外增值税税率是多少
  • 融资租赁有免租金吗
  • 怎么填红字信息表
  • 政府补助的相关法律法规
  • mysql数据库优化配置
  • 通行费抵扣进项税怎么做账
  • 收入增长率计算器
  • 税收制度政策
  • 进项发票的作用
  • 股权转让会计分录借银行存款
  • 未抵扣进项税额什么意思
  • 事业单位结余是什么意思
  • 制造费用包括哪些内容科目
  • 收到联营单位投入的设备一台
  • 应收帐款表
  • 付款与开票单位不一致怎样做账
  • mysql 更改密码
  • unix操作系统有哪些主要特色
  • linux mount -o remount
  • ubuntu20.04软件中心
  • soundtrax.exe - soundtrax是什么进程
  • centos6 docker
  • linux如何快速统计文件个数
  • linux a
  • win7怎么打开磁盘管理器
  • win7如何显示文件扩展
  • js object.seal
  • elementtree修改节点属性
  • nodejs文件上传服务器
  • javascript如何学
  • nodejsapi
  • androidstudiosdk
  • java多线程用法
  • dos命令到一个文件夹
  • jQuery基于ajax()使用serialize()提交form数据的方法
  • python返回结果
  • 清除cookie是什么意思
  • 基于JAVASCRIPT实现的可视化工具是
  • 免教育费附加会计分录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设