1.弹性布局
2.主轴对齐模式
3.修改侧轴对齐方式
4.弹性特点
1.子集如果没有写高度 会自动拉伸高度
2.子集如果没有宽度 宽度会跟着内容来
5.弹性伸缩比
- flex-direction属性
flex-direction属性决定主轴的方向（即项目的排列方向）。
.box{flex-direction:row|row-reverse|column|column-reverse;}
它可能有4个值。
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
7.flex-wrap属性
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{flex-wrap:nowrap|wrap|wrap-reverse;}
它可能取三个值。
（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。
8.案例一 flex设置元素垂直居中对齐
<!DOCTYPE html>
<html lang="en">
<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>
<link rel="stylesheet" href="iconfont.css">
<style>
.big{
display: flex;
width: 800px;height: 300px;
margin: 0 auto;
background-color: blue;
border: 1px solid black;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
}
.one{
background-color: purple;
width: 100px; height: 100px;
}
</style>
</head>
<body>
<div class="big">
<div class="one">1</div>
</div>
</body>
</html>
案例：用flex布局制作导航栏
<!DOCTYPE html>
<html lang="ch-ZN">
<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>用flex布局制作导航栏</title>
<link rel="stylesheet" href="iconfont.css">
<style>
ul{
display: flex;
}
li{
flex: 1;
height: 100px;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li>音乐</li>
<li>旅游</li>
<li>电信</li>
</ul>
</body>
</html>
