这篇文章给大家介绍的内容是关于弹性盒布局的介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
弹性布局
弹性布局，又称“Flex布局”
弹性布局的使用
给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式
容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；
display:flex; 容器添加弹性布局后，显示为块级元素；
display:inline-flex; 容器添加弹性布局后，显示为行级元素；
设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。
代码如下：
Document *{ margin: 0; padding: 0; } .box{ display: flex; } .box p{ height: 50vh; flex: 1; } .box p:nth-child(1){ background: gray; } .box p:nth-child(2){ background: green; } .box p:nth-child(3){ background: pink; flex: 3; } .box p:nth-child(4){ background: red; } .box p:nth-child(5){ background: yellow; }
1
2
3
4
5
登录后复制
效果图：
相关推荐：
弹性布局是什么？弹性布局flex的基本应用（附代码）
弹性布局是什么？弹性布局flex的基本应用（附代码）
以上就是关于弹性盒布局的介绍（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2894642.html
