1、flex布局
1.1 flex認識
1.2 flex組成
1.3 flex布局
1.3.1 主軸對齊方式
<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex--主軸對齊方式</title>
<style>
.box{
width: 900px;
height: 400px;
border: 1px solid;
display: flex;
/* justify-content 項目在主軸（水平）方向的排布
flex-start:默認 從起點開始排 順著主軸方向
flex-end: 從終點開始排 逆著主軸方向
center 居中
space-between：左 右 緊貼兩邊，中間平均分
space-around：均勻分布在盒子兩側，二倍寬
space-evenly：全部平均分
*/
justify-content: space-evenly;
}
.box div{
width: 200px;
height: 100px;
background-color: aqua;
border: 1px dashed rebeccapurple;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
1.3.2 側軸對齊方式
<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>側軸對齊方式</title>
<style>
.box{
width: 900px;
height: 400px;
border: 1px solid;
display: flex;
/* align-items 項目在側軸方向的排布
flex-start：默認 上 側軸的起點
flex-end： 側軸終點
center 側軸居中
stretch：如果子元素沒有高，默認拉伸高，沿著側軸方向拉伸
*/
/* align-items: stretch; */
/* justify-content: center; */
}
.box div{
width: 200px;
/* height: 100px; */
background-color: aqua;
border: 1px dashed rebeccapurple;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
1.3.3 修改主軸方向
<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>改變主軸方向</title>
<style>
.box{
width: 900px;
height: 600px;
border: 1px solid;
display: flex;
/* flex-direction：調整主軸的方向
row 默認 水平方向 行 從左到右
column 垂直方向 列 從上到下
row-reverse 水平方向 從右到左
column-reverse 垂直方向 從下到上
*/
flex-direction: column-reverse;
}
.box div{
width: 200px;
height: 100px;
background-color: aqua;
border: 1px dashed rebeccapurple;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
1.3.4 align-self
<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>align-self</title>
<style>
* {
box-sizing: border-box;
}
.box {
display: flex;
width: 780px;
height: 500px;
border: 1px solid red;
align-items: center;
}
.box .son {
width: 234px;
height: 100px;
background-color: pink;
border: 1px dashed deeppink;
}
.box .son:nth-child(1){
/* align-slef:單獨控制某個彈性盒子的側軸對齊方式 */
align-self: flex-start;
}
.box .son:nth-child(3){
align-self: flex-end;
}
</style>
</head>
<body>
<div class="box">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">3</div>
</div>
</body>
</html>
1.3.5 彈性伸縮比
<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>彈性伸縮比</title>
<style>
.box{
width: 1000px;
height: 600px;
border: 1px solid;
display: flex;
}
.box div{
flex: 1;
width: 200px;
height: 100px;
background-color: aqua;
border: 1px dashed rebeccapurple;
}
.box div:nth-child(1){
flex: 2;
}
.box div:last-child{
flex: 2;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
1.3.6 彈性盒子換行
彈性盒子可以自動擠壓或拉伸，默認情況下，所有盒子都在一行顯示。
屬性名：flex-wrap
屬性值：
????????wrap：換行
????????nowrap：不換行（默認）
<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>彈性盒子換行</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box{
width: 700px;
height: 500px;
background-color: pink;
display: flex;
/* flex-wrap wrap 換行，nowrap 不換行 */
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.son{
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="box">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">3</div>
<div class="son">4</div>
<div class="son">5</div>
<div class="son">6</div>
</div>
</body>
</html>
1.3.7 行對齊方式
文章來源：http://www.zghlxwxcb.cn/news/detail-818100.html
<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行對齊方式</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box{
width: 700px;
height: 500px;
border: 1px solid;
display: flex;
/* 添加了換行，瀏覽器就會認為你是多行 */
flex-wrap: wrap;
justify-content: space-evenly;
/* 1.多行 2.控制行在側軸上的對齊方式 */
align-content: space-evenly;
}
.son{
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="box">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">3</div>
<div class="son">4</div>
<div class="son">5</div>
<div class="son">6</div>
</div>
</body>
</html>
文章來源地址http://www.zghlxwxcb.cn/news/detail-818100.html
到了這里，關于Web04--Flex布局的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
![[HTML]Web前端開發(fā)技術10（HTML5、CSS3、JavaScript ）CSS+DIV頁面布局，固定定位，相對定位relative，絕對定位absolute，層定位的應用——喵喵畫網頁](https://imgs.yssmx.com/Uploads/2024/02/783047-1.png)
![[HTML]Web前端開發(fā)技術11（HTML5、CSS3、JavaScript ）頁面布局設計 “三行模式”或“三列模式”“三行二列”“三行三列”模式 多行多列復雜模式水平導航菜單——喵喵畫網頁](https://imgs.yssmx.com/Uploads/2024/02/787720-1.png)
