1、首先flex布局分成两部分，盒子部分和项目部分。任何添加diaplay:flex的元素成为盒模型，也叫做容器；它里面的元素成为容器成员，也叫做flex项目。
2、盒子部分的属性
1、flex-direction:盒子的主轴方向：值得话只要分为row和column。决定了主轴是沿着水平方向还是竖直方向。
2、flex-wrap:盒子整体项目的换行的方式
3、justify-content:盒子整体项目在主轴上的对齐方式
4、align-items:盒子整体项目在交叉轴上的对齐方式
5、align-content:多个轴线时，轴线的对齐方式
3、项目部分的属性
1、flex-grow:如果项目还有剩余空间，占据剩余空间的比例。如果flex-grow是0，那么就不占据剩余空间，如果项目A和项目B分别是flex-grow:1、flex-grow:2，那么如果有剩余空间就是A占1/3,B占2/3。默认值是0
2、flex-shrink:定义了项目是否缩小，如果是1，那么当空间不足的时候，会缩小。如果数值是0，其他的是1，那么前者不会收缩，其他的会相应的收缩。默认值是1
3、align-self:这个项目的对齐方式，允许这个项目和其他项目的对齐方式不同
4、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>
<style>
.box{
width: 200px;
height: 200px;
background-color: aquamarine;
display: flex;
justify-content:center;
align-items: center;
}
.item{
width: 100px;
height: 100px;
background-color: brown;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
</html>
5、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>
<style>
html,body{
margin: 0;
padding: 0;
}
.box{
height: 300px;
display: flex;
justify-content:space-between;
background-color: cadetblue;
}
.left{
height: 100%;
width:200px;
background-color: brown;
}
.right{
height: 100%;
width: 300px;
background-color:blue;
}
</style>
</head>
<body>
<div class="box">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
</body>
</html>
6、实现三点色子
<!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>
<style>
.box{
padding: 5px;
width: 200px;
height: 200px;
background-color: gainsboro;
border-radius: 8px;
display: flex;
justify-content: space-between;
align-items: center;
}
.ball{
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
}
.left{
align-self: flex-start;
}
.right{
align-self: flex-end;
}
</style>
</head>
<body>
<div class="box">
<div class="left ball"></div>
<div class="center ball"></div>
<div class="right ball"></div>
</div>
</body>
</html>
7、实现上下定高，中间自适应的，但是footer永远在最下面的布局
<!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>
<style>
body,html{
height: 100%;
margin: 0;
}
.box{
height: 100%;
display: flex;
flex-direction: column;
}
.header{
height: 200px;
background-color: salmon;
flex-shrink: 0;
}
.center{
height: 30px;
background-color: sienna;
}
.wrapp{
flex-grow: 1;
}
.footer{
height: 100px;
background-color: seagreen;
flex-shrink: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="header">header</div>
<div class="wrapp">
<div class="center">center</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
