弹性布局是CSS3新增的一种布局思想，他将盒子分为容器与项目
容器：最外层盒子设置display：flex，容器设置弹性布局后，会清除容器内的浮动布局
项目：容器下的子盒子，！注意不包括项目下的内容，但项目也可设置为容器
<style>
*{
margin: 0;
padding: 0;
}
/* 此时main为容器 */
main{
width: 100%;
height: 400px;
display: flex;
}
/* section为项目 */
section{
width: 200px;
height: 200px;
background-color: red;
border: 1px solid blue;
}
</style>
</head>
<body>
<main>
<section>
<!-- div为项目下的内容 -->
<div></div>
</section>
<section></section>
<section></section>
</main>
</body>
设置弹性布局后，沿着容器的水平方向会存在一条轴线为主轴，与其对应垂直方向会存在一条交叉轴，项目默认为上图的主轴进行排列。
容器属性：justify-content和align-items分别为主轴和交叉轴排布样式
/* 此时main为容器 */
main{
width: 100%;
height: 400px;
display: flex;
/* 主轴靠右对齐 */
justify-content: flex-end;
/* 主轴居中对齐 */
justify-content: center;
/* 主轴左右两端对齐 */
justify-content: space-between;
/* 主轴对齐，项目间的间距为两端的两倍 */
justify-content: space-around;
/* 主轴对齐，项目间的间距与两端间距相等 */
justify-content: space-evenly;
}
/* section为项目 */
section{
width: 200px;
height: 200px;
background-color: red;
border: 1px solid blue;
}
</style>
</head>
<body>
<main>
<section></section>
<section></section>
<section></section>
</main>主轴靠右对齐 justify-content: flex-end;
主轴居中对齐 justify-content: center;
主轴左右两端对齐 justify-content: space-between;
主轴对齐，项目间的间距为两端的两倍 justify-content: space-around;
主轴对齐，项目间的间距与两端间距相等 justify-content: space-evenly;
align-items交叉轴属性
/* 此时main为容器 */
main{
width: 100%;
height: 400px;
display: flex;
/* 交叉轴居中对齐 */
align-items: center;
/* 交叉轴底部对齐 */
align-items: flex-end;
border: 5px solid rebeccapurple;
}
常用 justify-content: center; align-items: center;作为文本上下左右居中对齐
/* 此时main为容器 */
main{
width: 100%;
height: 400px;
display: flex;
/* 轴线旋转 */
flex-direction: column;
/* 镜像翻转 */
flex-direction: row-reverse;
/* 轴线旋转加镜像翻转 */
flex-direction: column-reverse;
border: 5px solid rebeccapurple;
}
/* section为项目 */
section{
width: 200px;
height: 200px;
background-color: red;
border: 1px solid blue;
}
</style>
</head>
<body>
<main>
<section>1</section>
<section>2</section>
<section>3</section>
</main>轴线旋转 flex-direction: column此时主轴与交叉轴旋转互换
镜像翻转 flex-direction: row-reverse;反向排布
轴线旋转加镜像翻转 flex-direction: column-reverse;
/* 此时main为容器 */
main{
width: 500px;
height: 400px;
display: flex;
/* 默认,不换行 */
flex-wrap: nowrap;
/* 允许换行 */
flex-wrap: wrap;
margin: 50px auto;
border: 5px solid rebeccapurple;
} 默认属性,不换行 flex-wrap: nowrap;当容器宽度比里面项目宽度小的时候，项目会等比缩放而不会换行显示
允许换行 flex-wrap: wrap;
项目属性
section:nth-of-type(1){
order: 2;
}
section:nth-of-type(2){
order: 3;
}
section:nth-of-type(3){
order: 1;
}order属性后面跟数字，数字越大，项目越靠前排列
section:nth-of-type(1){
order: 1;
}
section:nth-of-type(2){
order: 2;
/* 居中 */
align-self: center;
/* 靠底部 */
align-self: flex-end;
/* 靠顶部 */
align-self: flex-start;
}
section:nth-of-type(3){
order: 3;
}align-self单个项目样式设定center为居中
section:nth-of-type(1){
width: 200px;
}
section:nth-of-type(2){
flex-grow: 1;
}
section:nth-of-type(3){
flex-grow: 4;
}flex-grow占当前同行剩余空间的等份数，如果容器没有设置固定的宽度，则设置了该属性的项目会随着容器宽度改变而改变，体现出了弹性盒子的“弹性”
/* 此时main为容器 */
main{
width: 500px;
height: 400px;
display: flex;
justify-content: space-between;
align-items: center;
margin: 50px auto;
border: 5px solid rebeccapurple;
}
/* section为项目 */
section{
width: 200px;
height: 200px;
background-color: red;
border: 1px solid blue;
}
section:nth-of-type(1){
flex-shrink: 0;
}
section:nth-of-type(2){
flex-shrink: 1;
}
section:nth-of-type(3){
flex-shrink: 0;
}flex-shrink为容器不足的情况下，该项目是否等比缩小0为不允许等比缩小，1为默认值，允许等比缩小
/* section为项目 */
section{
width: 200px;
height: 200px;
background-color: red;
border: 1px solid blue;
}
section:nth-of-type(1){
flex-basis: 100px;
}
section:nth-of-type(2){
flex-basis: 300px;
}
section:nth-of-type(3){
flex-basis: 50px;
}flex-basis为项目宽度，比width权重高
