文章插图
flex-wrap:wrap 显示效果如下:
文章插图
⑥:在伸缩和中元素换行后设置多行对齐方式,通过align-content属性实现
align-content:stretch默认值显示效果:
文章插图
align-content:flex-start 显示效果如下:
文章插图
align-content:flex-end 显示效果如下:
文章插图
align-content:center 显示效果如下:
文章插图
align-content: space-between 显示效果如下
文章插图
align-content: space-around显示效果如下:
文章插图
以上属性都是给弹性盒子设置的属性,各位小伙伴要注意.如下代码所示:
文章插图
⑦:如果希望弹性盒子中子元素按照任何一个比例显示,可以给子元素设置flex属性,如下图所示:
Flex: 1.代表子元素占父元素空间宽度的一份.
文章插图
Felx:2代表子元素占父元素空间宽度的2份,依次类推
文章插图
三: 弹性布局优缺点分析
弹性布局在网页中实现快速分配比例,盒子快速对齐优势很大,因为通过简单的几个属性就可以实现,进而减少我们设置具体值.但是弹性布局中的属性对于浏览器版本要求比较严格,如果浏览器版本太低那么弹性布局中的属性是无法正常使用的.如下图所示:
文章插图
写在最后的几句话,送给大家.学习任何知识都不是为了去解决某个特定问题的.我们学的知识可以当成是我们工具包中的一个新工具.在恰当的时候使用恰当的工具解决问题就可以了.针对弹性布局中还有其他属性,由于我们在写页面的过程中不是经常用到,所以今天主要分享给大家弹性布局中我们必须会的. 好的这个章节就讲到这里 。
黑马最新活动：
黑马程序员2020年JAVA中级程序员学习路线图、全部资源免费大放送，点击下方：“了解更多”的链接就可进入页面领取哦 。
【移动端开发常用布局：前端弹性布局总结】
推荐阅读
- 在软件项目开发过程中，都有哪些常见的软件架构？
- ping 域名+端口 Windows和Linux下检测网络是否可用
- 什么是BBR
- 钉钉微信深度对比：移动办公软件终结“碰瓷”社交软件的时代
- 教你无需任何开发技术，自己开发一款app软件
- 以淘宝为例，解析大型电商服务端架构！
- 实时视频直播客户端技术盘点Native、HTML5、WebRTC、微信小程序
- 手把手从头开始教你，彻底理解服务端渲染原理
- AGV 移动机器人产业链全分析
- Android 12是什么