溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS3中的Flex布局怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS3中的Flex布局怎么使用”文章能幫助大家解決問題。
Flex是Flexible Box 的縮寫，也稱為彈性盒子布局。
Flex布局組成：
flex容器（flex container）
flex項（flex items）
主軸（main axis）
交叉軸（cross axis）
在flex布局未出現前，網頁布局的方式為標準流，浮動，定位等。在解決比較復雜的問題相對麻煩。【學習視頻分享：css視頻教程、web前端】
而flex布局可以：
自動彈性伸縮
更輕松地設計靈活的響應式布局結構
精確靈活控制塊級盒子的布局方式
在pc端和移動端都適用
在使用flex布局之前首先定義 Flex 容器。
display:flex;
定義 Flex 容器后可以使用相應的屬性， 改變子元素的布局方式，讓子元素可以自動的擠壓或拉伸。
相應屬性：
1. justify-content 主軸元素對齊方式
2. align-items 交叉軸元素對齊方式
3. flex-direction 設置主軸方向
4. flex-wrap 主軸一行滿了換行
5. align-content 交叉軸行對齊方式
6. flex-flow 同時設置 flex-direction和 flex-wrap屬性
容器的justify-content屬性可以設置子元素在主軸方向的對齊方式。（記得先display:flex;定義容器）
justify-content: center;//居中對齊
justify-content: space-between;//間距在子元素之間
justify-content: space-evenly;//主軸方向所有地方的間距都相等
justify-content: space-around;//間距加在子元素的兩側（中間大的是兩個子元素的加在一起）
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主軸對齊方式</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
/* justify-content: center; */
/* justify-content: space-between; */
/* justify-content: space-evenly; */
justify-content: space-around;
height: 200px;
margin: auto;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
容器的align-items屬性可以設置子元素在交叉軸方向的對齊方式。
由此我們可以設置將容器屬性justify-content和 align-items 設置為居中，讓元素實現完美居中。
align-items: center;//居中
align-items: stretch;//拉伸,默認值(現有狀態,這里測試去掉子級的高度)
align-items: flex-start;//將子元素在容器頂部對齊
align-items: flex-end;//將子元素在容器底部對齊
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>交叉軸對齊方式</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
display: flex;
/* 居中 */
/* align-items: center; */
/* 拉伸,默認值(現有狀態,測試的時候去掉子級的高度) */
/* align-items: stretch; */
/* align-items: flex-start; */
align-items: flex-end;
height: 300px;
margin: auto;
border: 1px solid #000;
}
.father div {
/* 如果不設置寬，由內容撐開 */
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
容器的flex-direction屬性可以改變flex布局的主軸方向。flex主軸方向默認為水平向右方向。如果修改主軸方向，那么交叉軸方向也會與之改變。
flex-direction: column;//主軸方向為垂直方向（從上到下）
flex-direction: column-reverse;//主軸方向為垂直方向（從下到上）
flex-direction: row;//主軸方向為水平方向（從左到右）
flex-direction: row-reverse;//主軸方向為水平方向（從右到左）
修改主軸方向后實現垂直居中：
display:flex;
flex-direction: column;
justify-content: center;
當定義flex容器之后，如果子元素過多超出主軸方向寬度，容器內的子元素會自動伸縮。
如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>彈性盒子換行</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
height: 500px;
border: 1px solid #000;
}
.box div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
解決：容器的flex-wrap屬性可以讓超出容器主軸方向的子元素換行顯示。
flex-wrap: nowrap;//默認值，不換行
flex-wrap: wrap;//換行，從上到下
flex-wrap: wrap-reverse;//換行，從下到上
容器的align-content屬性可以調節子元素行的對齊方式（需要先設置換行之后）。
align-content: center;//居中對齊
align-content: space-around;//間距加在子元素的兩側（中間大的是兩個子元素的加在一起）
align-content: space-between;//間距在子元素之間
前三者的屬性跟主軸對齊方式一樣就不再贅述。
align-content: stretch;拉伸,默認值(現有狀態,這里測試去掉子級的高度)
flex-flow屬性是用于同時設置 flex-direction 和 flex-wrap 屬性的簡寫屬性。
flex-flow: row wrap;
我們可以設置相應屬性讓flex 容器的直接子元素成為彈性（flex）項目。（在使用flex布局之前首先定義 Flex 容器。）
相應屬性：
1. flex-grow
2. flex-shrink
3. flex-basis
4. flex
5. align-self
6. order
使用flex-grow屬性來定義彈性盒子內部子元素的放大比例（當所有子元素寬度之和小于父元素的寬度時子元素如何分配父元素的剩余空間）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
display:flex;
width:200px;
height:150px;
}
.box1{
/* 沒有設置寬度 */
background:red;
flex-grow: 1;
}
.box2{
background:blue;
flex-grow: 2;
}
.box3{
background:orange;
flex-grow: 1;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
使用flex-shrink屬性來定義彈性盒子內部子元素的縮小比例（當所有子元素寬度之和大于父元素的寬度時子元素如何縮小自己的寬度）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
display:flex;
width:200px;
height:150px;
}
.box1{
width: 100px;
background:red;
flex-shrink: 1;
}
.box2{
width: 100px;
background:blue;
flex-shrink: 2;
}
.box3{
width: 100px;
background:orange;
flex-shrink: 1;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
使用flex-basis屬性來設置子元素的寬度，默認值為auto（作用跟width一樣,優先級比width高，就算width在后面也會顯示flex-basis）。
使用flex屬性來同時設置flex-grow、flex-shrink、flex-basis這3個屬性，flex屬性就是一個復合屬性。
實際應用一般用復合屬性。
語法：
flex: grow shrink basis;//順序不能改變,默認值為0 1 auto;
使用align-self屬性設置子元素項目的對齊方式。
注意：align-self屬性會覆蓋容器的 align-items 屬性所設置的對齊方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
display:flex;
width:200px;
height:150px;
align-items: center;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 50px;
background:red;
align-self: flex-start;
}
.box2{
width: 100px;
height: 50px;
background:blue;
}
.box3{
width: 100px;
height: 50px;
background:orange;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
使用order屬性來定義子元素的排列順序。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
display:flex;
width:200px;
height:150px;
}
.box1{
width: 100px;
background:red;
order: 2;
}
.box2{
width: 100px;
background:blue;
order: 1;
}
.box3{
width: 100px;
background:orange;
order: 3;
}
</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
關于“CSS3中的Flex布局怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
