flex彈性布局的簡單使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>測試</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>首頁</li>
<li>公告</li>
<li>熱點</li>
<li>聯系</li>
</ul>
</body>
</html>
由于li标簽是塊級元素，是以浏覽器顯示如下：
那麼如何讓它變成一行呢，可以使用浮動進行設定，但是這裡使用flex彈性盒子進行布局。
為上面的style标簽下添加如下CSS代碼如下：
ul {
/* 讓父級容器添加“display: flex;”變成彈性盒子 */
/* 讓行級元素變成塊級元素 */
display: flex;
/* 讓父級容器添加排列方向，預設是水準排列，row表示水準方向排列，column表示垂直方向排列 */
flex-direction: row;
}
其中“display:flex;"是為要進行布局的元素的父級元素添加的，比如說這裡要布局li元素，是以就給ul元素添加flex即可。
而”flex-direction:row"表示讓flex布局下的子元素水準排列布局，而“flex-direction:column"表示讓子級元素垂直排列，比使用浮動更簡單。
等分布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>測試</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
/* 使用flex彈性盒子布局 */
display: flex;
}
li {
/* 使每個li等分寬度 */
flex: 1;
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li class="li1">首頁</li>
<li class="li2">公告</li>
<li class="li3">熱點</li>
<li class="li4">聯系</li>
</ul>
</body>
</html>
預覽效果如下：
為要進行等分布局的父級元素添加”display:flex"，為li元素添加“flex:1"即每個li都占四分之一的寬度，就實作了所謂的等分布局。
不等分布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>測試</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
/* 使用flex彈性盒子布局 */
display: flex;
}
li {
border: 1px solid red;
}
.li1 {
/* 占十分之一 */
flex: 1;
}
.li2 {
/* 占十分之二 */
flex: 2;
}
.li3 {
/* 占十分之三 */
flex: 3;
}
.li4 {
/* 占十分之四 */
flex: 4;
}
</style>
</head>
<body>
<ul>
<li class="li1">首頁</li>
<li class="li2">公告</li>
<li class="li3">熱點</li>
<li class="li4">聯系</li>
</ul>
</body>
</html>
浏覽效果：
分别為設定了"display:flex"的子元素設計flex的值，計算比例。
左固定右響應布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>測試</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
/* 使用flex彈性盒子布局 */
display: flex;
}
li {
border: 1px solid red;
text-align: center;
}
.li1 {
/* 占300px */
flex: 300px;
}
.li2,
.li3,
.li4 {
/* .li2,.li3,li4平分剩下的寬度 */
flex: 1;
}
</style>
</head>
<body>
<ul>
<li class="li1">首頁</li>
<li class="li2">公告</li>
<li class="li3">熱點</li>
<li class="li4">聯系</li>
</ul>
</body>
</html>
浏覽效果如下：
設定flex彈性盒子布局，給子級元素li添加”flex“值，設定li1的元素為固定布局，即300px，而其餘三個元素li2,li3,li4平分剩下的寬度。
多行拆行布局
給父級元素添加”flex-warp:warp"表示超過寬度拆行（即起新的一行）進行處理。flex-wrap:nowrap表示不拆行，預設是不拆行的。
看如下代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>測試</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
/* 使用flex彈性盒子布局 */
display: flex;
/* 設定一個固定寬度 */
width: 300px;
}
li {
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li class="li1">首頁</li>
<li class="li2">公告</li>
<li class="li3">熱點</li>
<li class="li4">聯系</li>
<li class="li1">首頁</li>
<li class="li2">公告</li>
<li class="li3">熱點</li>
<li class="li4">聯系</li>
<li class="li1">首頁</li>
<li class="li2">公告</li>
<li class="li3">熱點</li>
<li class="li4">聯系</li>
</ul>
</body>
</html>
浏覽效果如下：
發現文字被換行了，寬度被壓縮了。
将ul的CSS樣式修改為如下：
ul {
/* 使用flex彈性盒子布局 */
display: flex;
/* 給定一個固定寬度 */
width: 300px;
/* 子級元素多行進行拆行處理 */
flex-wrap: wrap;
}
再次運作效果如下：
會發現文字内容沒有換行，而多餘的子元素被拆行了。
子級元素橫向排列
給父級元素添加“justify-content:center"表示使子級元素橫向排列居中顯示。其他的值如”flex-start"表示預設居左排列；“flex-end"表示居右排列；”center“表示居中排列；”space-between"表示兩端對齊；“space-around"表示元素兩邊間距一樣。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>測試</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
/* 使用flex彈性盒子布局 */
display: flex;
/* 給定一個固定寬度 */
width: 600px;
/* 設定一個邊界進行觀察 */
border: 1px solid blue;
/* 子級元素橫向排列居中 */
justify-content: center;
}
li {
border: 1px solid red;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<ul>
<li class="li1">首頁</li>
<li class="li2">公告</li>
<li class="li3">熱點</li>
<li class="li4">聯系</li>
</ul>
</body>
</html>
效果如下：
子級元素縱向排列
給父級元素添加”align-items:center"表示子級元素縱向居中排列。其他的值跟justify-content的值用法差不多。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>測試</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
/* 使用flex彈性盒子布局 */
display: flex;
/* 給定一個固定寬度 */
width: 600px;
/* 給定一個固定高度便于觀察 */
height: 200px;
/* 設定一個邊界進行觀察 */
border: 1px solid blue;
/* 子級縱向排列居中 */
align-items: center;
}
li {
border: 1px solid red;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<ul>
<li class="li1">首頁</li>
<li class="li2">公告</li>
<li class="li3">熱點</li>
<li class="li4">聯系</li>
</ul>
</body>
</html>
浏覽效果如下：
還有個align-content，其值和上面兩個差不多，隻是該屬性在有折行的情況才能顯示出效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>測試</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
ul {
/* 使用flex彈性盒子布局 */
display: flex;
/* 給定一個固定寬度 */
width: 400px;
/* 給定一個固定高度便于觀察 */
height: 200px;
/* 設定一個邊界進行觀察 */
border: 1px solid blue;
/* 子級元素折行處理 */
flex-wrap: wrap;
/* 子級元素橫向居中布局 */
justify-content: center;
/* 在有折行的情況下，縱向居中排列 */
align-content: center;
}
li {
border: 1px solid red;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<ul>
<li class="li1">首頁</li>
<li class="li2">公告</li>
<li class="li3">熱點</li>
<li class="li4">聯系</li>
<li class="li1">首頁</li>
<li class="li2">公告</li>
<li class="li3">熱點</li>
<li class="li4">聯系</li>
<li class="li1">首頁</li>
<li class="li2">公告</li>
<li class="li3">熱點</li>
<li class="li4">聯系</li>
</ul>
</body>
</html>