CSS3中的Flex布局怎么使用
這篇文章主要介紹“CSS3中的Flex布局怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“CSS3中的Flex布局怎么使用”文章能幫助大家解決問題。
成都創(chuàng)新互聯(lián)公司是一家集網站建設,東麗企業(yè)網站建設,東麗品牌網站建設,網站定制,東麗網站建設報價,網絡營銷,網絡優(yōu)化,東麗網站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網站。
簡介
什么是Flex布局
Flex是Flexible Box 的縮寫，也稱為彈性盒子布局。
Flex布局組成：
flex容器（
flex container）flex項（
flex items）主軸（
main axis）交叉軸（
cross axis）
Flex布局的作用
在flex布局未出現(xiàn)前，網頁布局的方式為標準流，浮動，定位等。在解決比較復雜的問題相對麻煩?！緦W習視頻分享：css視頻教程、web前端】
而flex布局可以：
自動彈性伸縮
更輕松地設計靈活的響應式布局結構
精確靈活控制塊級盒子的布局方式
在pc端和移動端都適用
Flex容器（父元素）屬性
在使用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屬性
1. justify-content
容器的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>
2. align-items
容器的align-items屬性可以設置子元素在交叉軸方向的對齊方式。
由此我們可以設置將容器屬性justify-content和 align-items 設置為居中，讓元素實現(xiàn)完美居中。
align-items: center;//居中
align-items: stretch;//拉伸,默認值(現(xiàn)有狀態(tài),這里測試去掉子級的高度)
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; */
/* 拉伸,默認值(現(xiàn)有狀態(tài),測試的時候去掉子級的高度) */
/* 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>
3. flex-direction
容器的flex-direction屬性可以改變flex布局的主軸方向。flex主軸方向默認為水平向右方向。如果修改主軸方向，那么交叉軸方向也會與之改變。
flex-direction: column;//主軸方向為垂直方向（從上到下）
flex-direction: column-reverse;//主軸方向為垂直方向（從下到上）
flex-direction: row;//主軸方向為水平方向（從左到右）
flex-direction: row-reverse;//主軸方向為水平方向（從右到左）
修改主軸方向后實現(xiàn)垂直居中：
display:flex;
flex-direction: column;
justify-content: center;
4. flex-wrap
當定義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;//換行，從下到上
5. align-content
容器的align-content屬性可以調節(jié)子元素行的對齊方式（需要先設置換行之后）。
align-content: center;//居中對齊
align-content: space-around;//間距加在子元素的兩側（中間大的是兩個子元素的加在一起）
align-content: space-between;//間距在子元素之間
前三者的屬性跟主軸對齊方式一樣就不再贅述。
align-content: stretch;拉伸,默認值(現(xiàn)有狀態(tài),這里測試去掉子級的高度)
6.flex-flow
flex-flow屬性是用于同時設置 flex-direction 和 flex-wrap 屬性的簡寫屬性。
flex-flow: row wrap;
Flex項（子元素）屬性
我們可以設置相應屬性讓flex 容器的直接子元素成為彈性（flex）項目。（在使用flex布局之前首先定義 Flex 容器。）
相應屬性：
1. flex-grow
2. flex-shrink
3. flex-basis
4. flex
5. align-self
6. order
1. flex-grow
使用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>
2. flex-shrink
使用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>
3. flex-basis
使用flex-basis屬性來設置子元素的寬度，默認值為auto（作用跟width一樣,優(yōu)先級比width高，就算width在后面也會顯示flex-basis）。
4. flex
使用flex屬性來同時設置flex-grow、flex-shrink、flex-basis這3個屬性，flex屬性就是一個復合屬性。
實際應用一般用復合屬性。
語法：
flex: grow shrink basis;//順序不能改變,默認值為0 1 auto;
5. align-self
使用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>
6. order
使用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布局怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。
網站名稱：CSS3中的Flex布局怎么使用
標題網址：http://jinyejixie.com/article14/pgeege.html
成都網站建設公司_創(chuàng)新互聯(lián)，為您提供App設計、關鍵詞優(yōu)化、網站策劃、網站設計、Google、軟件開發(fā)
聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)
- 如何通過優(yōu)化使網站排名在首頁 2013-04-29
- 網站首頁關鍵詞修改對網站排名有影響嗎？ 2014-01-07
- SEO快速提升網站排名的方法 2015-04-05
- 網站排名與網站建設的哪些因素有關 2014-06-30
- 為什么網站排名和權重突然下降？ 2022-09-25
- 網站排名SEO優(yōu)化有什么變化 2021-10-05
- 穩(wěn)定網站排名的幾個要點 2023-04-17
- 網站排名下降了,你知道是什么原因嗎? 2022-06-24
- 泰安網站排名seo：別忽略了競價排名 2023-01-07
- 如何通過網站關鍵詞優(yōu)化快速提高網站排名 2016-11-13
- 企業(yè)網站排名不穩(wěn)定的原因有哪幾點 2014-07-02
- 創(chuàng)新互聯(lián)網站開發(fā)公司揭密網站排名的“幕后黑手 2022-05-04