本文由雲+社區發表 本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下Flex佈局是如何解決CSS佈局問題。 一．垂直居中 這裡同時用非flex佈局和flex佈局兩種方式來實現，可以對比兩種實現方式的差異。 1.1用margin實現垂直居中 實現方式： 父元素採用相對定位，子元素採用絕 ...
本文由雲+社區發表
本文將通過三個簡單的實例，實際應用上篇文章的基礎理論知識，展示下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 送你一份技術課程大禮包！
