CSS中flex和inline-flex的區(qū)別詳解
發(fā)布時間：2020-08-31 16:12:38 作者：早起的年輕人-趙 
我要評論
我要評論這篇文章主要介紹了CSS中flex和inline-flex的區(qū)別詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
inline-flex 和 inline-block 一樣，對內(nèi)部元素來說是個 display:flex 的容器，對外部元素來說是個 inline 的塊。
兩者的區(qū)別描述：
- flex： 將對象作為彈性伸縮盒顯示
- inline-flex：將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示
一句話來描述就是 當Flex Box 容器沒有設置寬度大小限制時，當display 指定為 flex 時，F(xiàn)lexBox 的寬度會填充父容器，當display指定為 inline-flex 時，F(xiàn)lexBox的寬度會包裹子Item，如下圖所示：
對應的代碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*Flex 容器*/
.flex__container {
display: inline-flex;
background-color: gray;
}
/*Flex 子 Item */
.flex__item {
width: 50px;
height: 50px;
background-color: aqua;
border: 1px solid black;
}
</style>
</head>
<body>
<!--Flex容器-->
<div class="flex__container">
<!--Flex容器中的子Item-->
<div class="flex__item"></div>
<div class="flex__item"></div>
<div class="flex__item"></div>
<div class="flex__item"></div>
</div>
</body>
</html>
到此這篇關于CSS中flex和inline-flex的區(qū)別詳解的文章就介紹到這了,更多相關CSS flex和inline-flex內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
詳解CSS中的display:flex||inline-flex屬性
這篇文章主要給大家介紹了CSS中的display:flex和display:inline-flex屬性，文中分別通過兩段實例代碼給大家介紹了display:flex和display:inline-flex的使用效果，感興趣的2016-12-20