弹性布局弹性布局，又称“flex布局”
弹性布局的使用给父容器添加display: flex/inline-flex;属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流的显示方式
容器添加弹性布局后，仅仅是容器内容采用弹性布局，而容器自身在文档流中的定位方式依然遵循常规文档流；
display:flex; 容器添加弹性布局后，显示为块级元素；
display:inline-flex; 容器添加弹性布局后，显示为行级元素；
设为 flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。
代码如下：
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>document</title> <style> *{ 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; } </style></head><body> <p class="box"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </p></body></html>
效果图：
相关推荐：
弹性布局是什么？弹性布局flex的基本应用（附代码）
html中弹性布局（flex）的介绍（附代码）
以上就是关于弹性盒布局的介绍（附代码）的详细内容。