CSS Flex 弹性布局
Flex 布局 = 弹性布局 = 伸缩布局
采用Flex布局的元素，称为Flex容器，它的所有子元素称为容器成员，称为Flex项目
flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
常见父盒子属性：
1.flex-direction:设置主轴方向
2.justify-content:设置主轴上字元素的排列方式
3.flex-wrap:设置子元素是否换行
4.align-items:设置侧轴上的字元素排列方式（单行）
5.align-content:设置侧轴上的子元素的排列方式（多行）
6.flex-flow:复合属性，等于同时设置了flex-direction和flex-wrap
常见子盒子属性：
1.flex :1 表示子项目所占份数
2.align-self:控制子项自己在侧轴的排列方式
具体如下：
1.flex-direction:设置主轴方向
flex布局中 ，分为主轴和侧轴，主轴默认为x轴，水平向右，侧轴为y轴，水平向下，
flex-direction：row 从左到右（默认值）
flex-direction： row-reverse 从右到左
flex-direction： column 从上到下
flex-direction： column-reverse 从下到上
flex-direction：row 从左到右（默认值）
.father {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
margin: 0 auto;
/* 默认的主轴为x轴 */
flex-direction: row;
}
.son {
width: 150px;
height: 100px;
background-color: rgb(153, 230, 122);
/* margin-left: 10px; */
}
<div class="father">
<span class="son">1</span>
<span class="son">2</span>
<span class="son">3</span>
<span class="son">4</span>
<span class="son">5</span>
<span class="son">6</span>
</div>flex-direction： row-reverse 从右到左
flex-direction: row-reverse;flex-direction： column 从上到下
flex-direction: column;flex-direction： column-reverse 从下到上
flex-direction: column-reverse;2.justify-content:设置主轴上子元素的排列方式
注意：使用前确认好主轴是哪个
justify-content: flex-start 如果主轴是x轴，则从左到右 (默认值)
justify-content: flex-end 从尾部开始排列
justify-content: center 在主轴居中对齐
justify-content: space-around 平方剩余空间
justify-content: space-between 先两边贴边，再平分剩余空间
justify-content: flex-start 如果主轴是x轴，则从左到右 (默认值)
.father {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
margin: 0 auto;
/* 默认的主轴为x轴 */
flex-direction: row;
justify-content: flex-start;
}
.son {
width: 150px;
height: 100px;
background-color: rgb(153, 230, 122);
/* margin-left: 10px; */
}
<div class="father">
<span class="son">1</span>
<span class="son">2</span>
<span class="son">3</span>
</div>justify-content: flex-end 从尾部开始排列
flex-direction: row;
justify-content: flex-end;justify-content: center 在主轴居中对齐
flex-direction: row;
justify-content: center;justify-content: space-around 平方剩余空间
flex-direction: row;
justify-content: space-between;justify-content: space-between 先两边贴边，再平分剩余空间
flex-direction: row;
justify-content: space-around;3.flex-wrap:设置子元素是否换行
flex-wrap: nowrap 默认不换行
flex-wrap: wrap 换行
flex-wrap: nowrap 默认不换行，如果装不开，会缩小子元素的宽度，放在父元素里
.father {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
margin: 0 auto;
/* 默认的主轴为x轴 */
flex-direction: row;
justify-content: space-around;
flex-wrap: nowrap;
}
.son {
width: 150px;
height: 100px;
background-color: rgb(153, 230, 122);
margin: 10px;
}
<div class="father">
<span class="son">1</span>
<span class="son">2</span>
<span class="son">3</span>
<span class="son">4</span>
<span class="son">5</span>
<span class="son">6</span>
<span class="son">7</span>
<span class="son">8</span>
</div>flex-wrap: wrap 换行
.father {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
margin: 0 auto;
/* 默认的主轴为x轴 */
flex-direction: row;
flex-wrap: wrap;
}
4.align-items:设置侧轴上的字元素排列方式（单行）
align-items:flex-start 从上到下
align-items:flex-end 从下到上
align-items:center 垂直居中
stretch:拉伸 （默认值）
align-items:center 侧轴垂直居中
.father {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
margin: 0 auto;
/* 默认的主轴为x轴 */
flex-direction: row;
/* 侧轴居中 */
align-items: center;
}
.son {
width: 150px;
height: 100px;
background-color: rgb(153, 230, 122);
margin: 10px;
}
<div class="father">
<span class="son">1</span>
<span class="son">2</span>
<span class="son">3</span>
</div>5.align-content:设置侧轴上的子元素的排列方式（多行）
只能用于出现换行情况（多行） 在单行情况下是没有效果的
align-content: flex-start 从侧轴的头部开始排列(默认值)
align-content: flex-end 从侧轴的尾部开始排列
align-content: center 在侧轴轴居中对齐
align-content: space-around 子项在侧轴平方剩余空间
align-content:space-between 子项在侧轴先两边贴边，再平分剩余空间
align-content:stretch 设置子项元素高度平分父元素高度
6.flex-flow:复合属性，等于同时设置了flex-direction和flex-wrap
/* flex-direction: row;
flex-wrap: wrap; */
flex-flow: column wrap;flex-flow: column wrap; === flex-direction: row; + flex-wrap: wrap;
给子项目设置：
1.flex :1 表示子项目所占份数
.father {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
margin: 0 auto;
/* flex-direction: row;
flex-wrap: wrap; */
/* flex-flow: column wrap; */
/* 侧轴居中 */
align-items: center;
}
.son1,
.son2,
.son3 {
width: 150px;
height: 100px;
background-color: rgb(153, 230, 122);
margin: 10px;
}
.father .son1,
.father .son3 {
flex: 1;
}
.father .son2 {
flex: 3;
}
<div class="father">
<span class="son1">1</span>
<span class="son2">2</span>
<span class="son3">3</span>
</div>2.align-self:控制子项自己在侧轴的排列方式
.father {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
margin: 0 auto;
}
.son1,
.son2,
.son3 {
width: 150px;
height: 100px;
background-color: rgb(153, 230, 122);
margin: 10px;
}
.father .son1,
.father .son3 {
flex: 1;
}
.father .son2 {
flex: 3;
align-self: flex-end;
}
<div class="father">
<span class="son1">1</span>
<span class="son2">2</span>
<span class="son3">3</span>
</div>