之前在一次面試中被問道flex佈局較普遍CSS佈局的優點在什麼地方，就個人經歷而言，flex佈局比普通CSS佈局簡便很多，比如我們要進行一個簡單的一行四個li的無序列表的排列，要求相鄰li元素間隔自適應，首尾元素要與ul容器沒有間隙，效果圖如下：
普通CSS佈局爲：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>1</title>
<style>
#box {
margin: 0px;
padding: 0px;
width: 300px;
height: 300px;
border: 2px solid slategrey;
list-style-type: none;
}
.item {
width: 60px;
height: 60px;
background: salmon;
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<div>
<ul id="box">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item" style="margin-right: 0px;"></li>
</ul>
</div>
</body>
</html>首先將li元素設置float：left，在已知ul寬度和li寬度的情況下要計算處相鄰li之間的間隔寬度，本例中則是300px-4*60px=60px,因爲四個元素間有三個間隔故60px*3=20px,這才計算出相鄰li的間隔寬度，併爲li元素設置margin-right：20px。又不能讓最後一個元素因爲超出父元素寬度而換行，則需在標籤上直接設置style="margin-right:0px;"覆蓋首部樣式表裏的設置，整個過程相當繁瑣。
若使用flex佈局，實現這一佈局就顯得輕鬆多了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>1</title>
<style>
#box {
margin: 0px;
padding: 0px;
width: 300px;
height: 300px;
border: 2px solid slategrey;
list-style-type: none;
display: flex;
justify-content: space-between;
}
.item {
width: 60px;
height: 60px;
background: salmon;
}
</style>
</head>
<body>
<div>
<ul id="box">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</div>
</body>
</html>flex佈局中簡單設置兩個屬性就可以達到我們想要的效果，即簡便也不用計算間隔寬度
flex佈局實現篩子裏的一、二、三、四點
結果：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>1</title>
<style>
#box {
display: flex;
width: 300px;
height: 300px;
border: 2px solid slategrey;
justify-content: center;
align-items: center;
}
.item {
width: 60px;
height: 60px;
background: salmon;
}
</style>
</head>
<body>
<div id="box">
<div class="item"></div>
</div>
</body>
</html>結果：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2</title>
<style>
#box {
display: flex;
width: 300px;
height: 300px;
border: 2px solid slategrey;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.item {
width: 60px;
height: 60px;
background: salmon;
}
</style>
</head>
<body>
<div id="box">
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>結果：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>3</title>
<style>
#box {
display: flex;
width: 300px;
height: 300px;
border: 2px solid slategrey;
flex-direction: column;
justify-content: space-between;
}
.item {
width: 60px;
height: 60px;
background: salmon;
}
.item:nth-child(2) {
align-self: center;
}
.item:nth-child(3) {
align-self: flex-end;
}
</style>
</head>
<body>
<div id="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>結果：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>4</title>
<style>
#box {
display: flex;
width: 300px;
height: 300px;
border: 2px solid slategrey;
flex-wrap: wrap;
align-content: space-around;
}
.item-box {
display: flex;
flex-basis: 100%; /*關鍵的設置*/
justify-content: space-around;
}
.item {
width: 60px;
height: 60px;
background: salmon;
}
</style>
</head>
<body>
<div id="box">
<div class="item-box">
<div class="item"></div>
<div class="item"></div>
</div>
<div class="item-box">
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
</html>