詳解CSS中的display:flex||inline-flex屬性
- 巴扎黑原創
- 2018-05-16 09:12:1216320瀏覽
這篇文章主要為大家介紹了CSS中的display:flex和display:inline-flex屬性，文中分別透過兩段實例程式碼向大家介紹了display:flex和display:inline-flex的使用效果，感有興趣的朋友可以參考借鑒，下面來一起看看吧。
介紹
Flex是Flexible Box的縮寫，意為"彈性佈局"，用來為盒狀模型提供最大的彈性。任何一個容器都可以指定為Flex佈局。
flex： 將物件作為彈性伸縮盒顯示
inline-flex：將物件作為內聯區塊級彈性伸縮盒顯示
flex範例程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.main{
width:200px;
background-color: red;
display: flex;/*父p设置该属性*/
}
.main>p{
width: 50px;
height: 50px;
border: 1px solid blue;
box-sizing: border-box;/*这是css3属性，如果不懂，请继续往下阅读*/
/*float:left;这个属性就不需要了，会自动浮动*/
}
</style>
</head>
<body>
<p class="main">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</p>
</body>
</html>效果圖如下：
display:inline-flex範例程式碼
如果想看到效果，將上面的display:flex,換成display:inline-flex,並且將width:200px刪除。在沒有測試之前，有的人可能會認為.main會佔據整個一行，但是，測試結果是，它會根據子元素所有的p大小自適應寬度和高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.main{
background-color: red;
display: inline-flex;/*父p设置该属性*/
}
.main>p{
width: 50px;
height: 50px;
border: 1px solid blue;
box-sizing: border-box;/*这是css3属性，如果不懂，请继续往下阅读*/
/*float:left;这个属性就不需要了，会自动浮动*/
}
</style>
</head>
<body>
<p class="main">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</p>
</body>
</html>效果圖如下：
以上是詳解CSS中的display:flex||inline-flex屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn