CSS中flex和inline-flex的區(qū)別詳解
發(fā)布時(shí)間：2020-08-31 16:12:38 作者：早起的年輕人-趙 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS中flex和inline-flex的區(qū)別詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
inline-flex 和 inline-block 一樣，對(duì)內(nèi)部元素來(lái)說(shuō)是個(gè) display:flex 的容器，對(duì)外部元素來(lái)說(shuō)是個(gè) inline 的塊。
兩者的區(qū)別描述：
- flex： 將對(duì)象作為彈性伸縮盒顯示
- inline-flex：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示
一句話來(lái)描述就是 當(dāng)Flex Box 容器沒(méi)有設(shè)置寬度大小限制時(shí)，當(dāng)display 指定為 flex 時(shí)，F(xiàn)lexBox 的寬度會(huì)填充父容器，當(dāng)display指定為 inline-flex 時(shí)，F(xiàn)lexBox的寬度會(huì)包裹子Item，如下圖所示：
對(duì)應(yīng)的代碼如下所示：
<!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>
到此這篇關(guān)于CSS中flex和inline-flex的區(qū)別詳解的文章就介紹到這了,更多相關(guān)CSS flex和inline-flex內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
詳解CSS中的display:flex||inline-flex屬性
這篇文章主要給大家介紹了CSS中的display:flex和display:inline-flex屬性，文中分別通過(guò)兩段實(shí)例代碼給大家介紹了display:flex和display:inline-flex的使用效果，感興趣的2016-12-20