本文由雲+社區發表
本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下Flex布局是如何解決CSS布局問題。
一．垂直居中
這里同時用非flex布局和flex布局兩種方式來實現，可以對比兩種實現方式的差異。
1.1用margin實現垂直居中
實現方式：
父元素采用相對定位，子元素采用絕對定位，先將元素的定點定位到父元素的中心，再使用margin負值法，即子元素自身寬度、高度的一半，將其拉回到父元素的中心。
實現效果：
附上完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中--normal</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.container {
width: 500px;
height: 300px;
margin: 80px;
border: 1px solid blue;
position: relative;
}
.item {
width: 300px;
height: 200px;
border: 1px solid red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
</html>
1.2用flex實現垂直居中
實現方式：
父元素啟用flex布局（display:flex），同時設置主軸上居中對齊（justify-content:center）、交叉軸上居中對齊（align-items:center）。子元素不需要額外設置樣式。
實現效果：同上
附上完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直居中--flex</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.container{
width:500px;
height:300px;
margin:80px;
border:1px solid blue;
display:flex;
justify-content: center;
align-items: center;
}
.item{
width:300px;
height:200px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
</div>
</body>
</html>
二．聖杯布局
2.1 普通方式實現聖杯布局
在我之前的文章聖杯布局與雙飛翼布局中詳細介紹過如何實現一個聖杯布局：
(1)中間的三欄布局，這里采用margin負值法：兩邊兩欄寬度固定，中間欄寬度自適應，左欄、右欄、中間欄向左浮動，左欄的margin-left設為-100%，中間欄的width設為100%，右欄的margin-left設為-右欄寬度。
(2)給container設置padding-left和padding-right屬性，值分別為左欄、右欄的寬度；
(3)將左右兩欄設置為相對定位，同時左欄的left值設為-左欄寬度，右欄的right設為-右欄寬度。
實現效果：
實現代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聖杯布局</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
header,
footer {
height: 100px;
width: 100%;
background-color: #bbbbbb;
}
.container {
height: 300px;
/* 聖杯布局 */
padding-left: 200px;
padding-right: 300px;
}
.container div{
float: left;
/* 聖杯布局 */
position:relative;
}
.left {
width: 200px;
height: 300px;
background-color: #DC698A;
margin-left: -100%;
/* 聖杯布局 */
left:-200px;
}
.middle {
width: 100%;
height: 300px;
background-color: #3EACDD;
}
.right {
width: 300px;
height: 300px;
background-color: #8CB08B;
margin-left: -300px;
/* 聖杯布局 */
right:-300px;
}
</style>
</head>
<body>
<header>頭部</header>
<div class="container">
<div class="middle">中間欄：內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>
<div class="left">左欄</div>
<div class="right">右欄</div>
</div>
<footer>底部</footer>
</body>
</html>
2.2用flex實現聖杯布局
實現方式：
(1)holyGrail啟用flex布局，設置holyGrail中的header、container、footer在交叉軸上豎向排列（flex-direction:column;）
(2)container中的三欄布局：container啟用flex布局，設置container中的middle、left、right在主軸上橫向排列（flex-direction:row，默認值可以不設）。由於html中先寫的middle，所以為了讓left在最左邊，要設置left的order為這三欄中最小的，即-1（其他兩欄order為默認值0）
可以看出Flex布局的實現方式更加簡單，也更加直觀。
實現效果：同上
實現代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>聖杯布局--flex</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.holyGrail{
display: flex;
flex-direction: column;
}
header,
footer {
height: 100px;
width: 100%;
background-color: #bbbbbb;
flex: 1; /*flex:1; === flex:1 1 auto;*/
}
.container {
height: 300px;
display: flex;
flex-direction: row;/*可不寫，默認值*/
flex:1;/*需要可自動擴展*/
}
.left {
width: 200px;
height: 300px;
background-color: #DC698A;
order:-1;/*左邊欄放到最左邊*/
}
.middle {
width: 100%;
height: 300px;
background-color: #3EACDD;
flex:1;
}
.right {
width: 300px;
height: 300px;
background-color: #8CB08B;
}
</style>
</head>
<body class="holyGrail">
<header>頭部</header>
<div class="container">
<div class="middle">中間欄：內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>
<div class="left">左欄</div>
<div class="right">右欄</div>
</div>
<footer>底部</footer>
</body>
</html>
三.固定欄-可擴展欄頁面布局
實現效果：
實現代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.container {
width: 300px;
height: 200px;
border: 1px solid blue;
display: flex;
flex-direction: column;
}
.nav {
height: 50px;
background-color: grey;
display: flex;
flex-direction: row;
}
.nav-item {
min-width: 60px;
border: 1px solid orangered;
}
.main {
display: flex;
flex-direction: row;
flex: 1;
/*main區域需要自動擴展*/
}
.main-left {
width: 100px;
/*main中的left區域固定*/
background-color: #DC698A;
}
.main-right {
background-color: #3EACDD;
flex: 1;
/*main中的right區域需要自動擴展*/
}
</style>
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="nav">
<div class="nav-item">nav1</div>
<div class="nav-item">nav2</div>
<div class="nav-item">nav3</div>
</div>
<div class="main">
<div class="main-left">固定欄：內容內容內容內容內容內容內容內容內容內容</div>
<div class="main-right">可擴展欄：內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容</div>
</div>
</div>
</body>
<script type="text/javascript">
(function run() {
$(".container").animate({ width: 500, height: 300 }, 1500,
() => {
$(".container").animate({ width: 300, height: 200 }, 1500, run)
}
)
}());
</script>
</html>
四.小結
本文主要提供了三個實例，來實際應用下flex的屬性。通過對比其他的實現方式，可以看出使用Flex布局可以優雅地實現相同的CSS布局問題。如有問題，歡迎指正。
此文已由作者授權騰訊雲+社區發布
搜索關注公眾號「雲加社區」，第一時間獲取技術干貨，關注后回復1024 送你一份技術課程大禮包！