這篇文章要跟大家介紹的內容是關於彈性盒佈局的介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
彈性佈局，又稱為「Flex佈局」
為父容器新增display: flex/inline-flex;屬性，即可使容器內容採用彈性佈局顯示，而不遵循常規文件流的顯示方式
容器添加彈性佈局後，僅是容器內容採用彈性佈局，而容器本身在文檔流中的定位方式依然遵循常規文檔流；
display:flex; 容器添加彈性佈局後，顯示為區塊級元素；
display:inline-flex; 容器新增彈性佈局後，顯示為行級元素；
設為Flex佈局後，子元素的float、clear和vertical-align屬性將失效。但是position屬性，依然生效。
程式碼如下：
nbsp;html>
<meta>
<meta>
<meta>
<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>
<p>
</p><p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
效果圖：
相關推薦：
HTML中彈性佈局（Flex）的介紹（附程式碼）以上是關於彈性盒佈局的介紹（附代碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
