詳解CSS中的display:flex||inline-flex屬性
發(fā)布時(shí)間：2016-12-20 17:00:43 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要給大家介紹了CSS中的display:flex和display:inline-flex屬性，文中分別通過(guò)兩段實(shí)例代碼給大家介紹了display:flex和display:inline-flex的使用效果，感興趣的朋友們可以參考借鑒，下面來(lái)一起看看吧。
介紹
Flex是Flexible Box的縮寫(xiě)，意為"彈性布局"，用來(lái)為盒狀模型提供最大的靈活性。任何一個(gè)容器都可以指定為Flex布局。
flex： 將對(duì)象作為彈性伸縮盒顯示
inline-flex：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性伸縮盒顯示
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;/*父div設(shè)置該屬性*/
}
.main>div{
width: 50px;
height: 50px;
border: 1px solid blue;
box-sizing: border-box;/*這是css3屬性，如果不懂，請(qǐng)繼續(xù)往下閱讀*/
/*float:left;這個(gè)屬性就不需要了，會(huì)自動(dòng)浮動(dòng)*/
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
效果圖如下：
display:inline-flex示例代碼
如果想看到效果，將上面的display:flex,換成display:inline-flex,并且將width:200px刪除。在沒(méi)有測(cè)試之前，有的人可能會(huì)認(rèn)為.main會(huì)占據(jù)整個(gè)一行，但是，測(cè)試結(jié)果是，它會(huì)根據(jù)子元素所有的div大小自適應(yīng)寬度和高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.main{
background-color: red;
display: inline-flex;/*父div設(shè)置該屬性*/
}
.main>div{
width: 50px;
height: 50px;
border: 1px solid blue;
box-sizing: border-box;/*這是css3屬性，如果不懂，請(qǐng)繼續(xù)往下閱讀*/
/*float:left;這個(gè)屬性就不需要了，會(huì)自動(dòng)浮動(dòng)*/
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
效果圖如下：
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。
相關(guān)文章
本文給大家整理了CSS中display flex（布局利器） 的相關(guān)知識(shí)，本文通過(guò)實(shí)例截圖的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-02-05
Flex是Flexible Box的縮寫(xiě)，翻譯成中文就是“彈性盒子”，用來(lái)為盒裝模型提供最大的靈活性，這篇文章主要介紹了前端彈性布局神器display:flex的相關(guān)知識(shí),需要的朋友可以參2023-06-12
