flexbox介绍
- 概念：flex = flex(ible) layout box model，弹性盒式模型
- 特点：它能够更加高效方便控制元素的对齐，排列，更重要的是能够自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的。
- 布局模型(Layout Model)
black-layout：块布局模型
inline-layout：行内布局模型
table-layout：表格布局模型
positioned-layout：定位布局模型
flexible-box-layout：弹性布局模型
grid-layout：栅格布局模型
flexbox.png
伸缩容器属性
display属性
- 概念：设置容器为伸缩容器
- 语法：display:flex | inline-flex
- 参数：不解释，与block/inline-block类似
.flex-container {
display:flex;
}
flex-direction属性
- 概念：定义子元素在主轴的排列方向，也就是主轴的方向
- 语法：flex-direction: row(默认) | row-reverse | column | column-reverse
- 参数：
row：横向排列，从左到右
row-reverse：横向排列，从右到左
column：纵向排列，从上到下
column-reverse：纵向排列，从下到上
.flex-container {
display:flex;
flex-direction: column-reverse;
}
flex-wrap属性
- 概念：定义子元素是否换行
- 语法：flex-wrap: nowrap(默认) | wrap | wrap-reverse
- 参数：
nowrap：不换行
wrap：换行
wrap-reverse：换行，倒序(第二行在上，第一行在下)
flex-flow属性
- 概念：由flex-direction属性和flex-wrap属性组成的复合属性
- 补充：使用此属性要遵循团队习惯，然后遵循个人习惯。考虑到可读性，个人建议不要使用此属性，而是分开写。
.flex-container {
display:flex;
flex-flow: row-reverse wrap;
}
justify-content属性
- 概念：控制子元素在主轴的对齐模式
- 语法：flex-start(默认) | flex-end | center | stretch | space-between | space-around
- 参数：
flex-start：主轴的开始位置
flex-end：主轴的结束位置
center：主轴的中间位置
space-between：空格间隔
space-around：空格环绕
.flex-container {
display:flex;
flex-direction: row;
justify-content: space-between; /*伸缩项目两边碰 中间空间平均分*/
justify-content: space-around; /*伸缩项目平均分 剩余空间两边碰*/
}
align-items属性
- 概念：控制子元素在交叉轴上的对齐模式
- 语法：align-items: flex-start | flex-end | center | baseline | stretch
- 参数：
flex-start：交叉轴的开始位置
flex-end：交叉轴的结束位置
center：交叉轴的中间位置
stretch：在交叉轴上拉伸
baseline：在交叉轴上以基线对齐
.flex-container {
display:flex;
align-items: center;
}
// 实现垂直居中对齐
.flex-container {
display:flex;
justify-content: center;
align-items: center;
}
align-content属性
- 概念：控制容器内多行在交叉轴上的排列方式
- 语法：align-content: flex-start(默认) | flex-end | center | stretch | space-between | space-around
- 参数：
flex-start：交叉轴的开始位置
flex-end：交叉轴的结束位置
center：交叉轴的中间位置
stretch：拉伸对齐
space-between：空格间隔
space-around：空格环绕 - 补充：只适合多行，且flex-wrap=wrap(换行)的情况
.flex-container {
display:flex;
flex-wrap: wrap;
width: 150px;
height: 250px;
align-content: center;
}
伸缩项目属性
order属性
- 概念：控制子元素出现在父容器的顺序
- 语法：order: 0(默认) | 正整数 | 负整数
- 补充：数值越小越靠前，也就是说，负整数会比0更靠前
.flex-container {
display: flex;
}
.flex-item:nth-child(1) {
order:3; // 第四位
}
.flex-item:nth-child(2) {
order:1; // 第三位
}
.flex-item:nth-child(3) {
order:-1; // 第一位
}
.flex-item:nth-child(4) {
order:0; // 第二位
}
flex-grow属性(伸展)
- 概念：分配伸缩容器的剩余空间
- 语法：flex-grow: 0(默认) | 正数
- 注意：
1，不能为负值
2，设置为0，不分配剩余空间
3，设置为同一数值，空间AA制，对除了内容以外的空间，做了平均分配
4，设置为不同数值，谁大地谁多
.flex-container {
display: flex;
}
.flex-item {
flex-grow: 1;
}
flex-shrink属性(收缩)
- 概念：当容器的剩余空间不足以容纳项目的时候，比谁能受委屈
- 语法：1(默认) | 正数 | 0
- 注意：
1，不能为负值
2，设置为0，不受委屈
3，设置为同一数值，受同样的委屈
4，设置为不同数值，谁大谁受委屈
.flex-container {
display: flex;
width: 300px;
}
.flex-item:nth-child(1) {
width: 100px;
}
.flex-item:nth-child(2) {
width: 200px;
}
.flex-item:nth-child(3) {
width: 150px;
flex-shrink: 0;
}
flex-basis属性(基准)
- 概念：基准？原来是计算前刨去的空间
- 解释：伸缩项目分配空间 = 伸缩容器的空间 - basis设置的空间 - 其他子元素的width(若无则为其他内容占的空间)
- 语法：flex-basis: auto(默认) | [width] | 0
- 参数：
[width]： width可以设置的值，这里也的都可以设置(比如Npx,Nrem...)
0：计算伸缩项目分配空间的时候，flex-basis=0的项目内容所占的空间会被认为是0 -
补充：如果所有项目的flex-basis属性都设置为0，那么就是绝对均分容器空间
flex-basis.png
注意这里的1,1,2是指flex-grow属性值，从这张图可以看出0 和 atuo的区别
.flex-container {
display: flex;
}
.flex-item {
flex-grow: 1;
}
.flex-item:nth-child(1) {
flex-basis:150px;
width:200px;
}
flex属性
- 概念：伸展(flex-grow) 收缩(flex-shrink) 基准(flex-basis)的复合属性
- 语法：1 0 auto | none | 0 | * * *
.flex-item:nth-child(1) {
// flex:1 0 auto
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
}
.flex-item:nth-child(1) {
// flex:none
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
.flex-item:nth-child(1) {
// flex:0
flex-grow: 0;
flex-shrink: 0;
flex-basis: 0;
}
// 视内容为没有，从整体上划分空间
.flex-item:nth-child(1) {
// flex:1
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
.flex-item:nth-child(2) {
// flex: 2;
flex-grow: 2;
flex-shrink: 0;
flex-basis: 0;
}
.flex-item:nth-child(3) {
// flex: 3;
flex-grow: 3;
flex-shrink: 0;
flex-basis: 0;
}
.flex-item:nth-child(4) {
// flex: 4;
flex-grow: 4;
flex-shrink: 0;
flex-basis: 0;
}
align-self属性
- 概念：在交叉轴上怎么对齐，自己说了算
- 语法：align-self: auto(默认值) | flex-start | flex-end | center | baseline | stretch
- 注意：如果伸缩项目设置有align-self且值不为auto，那么会覆盖伸缩容器为其设置的伸缩方式
.flex-container {
display: flex;
height: 250px;
align-items: center;
}
.flex-item:nth-child(1) {
align-self: auto; // 使用父容器设置的属性值：center
}
.flex-item:nth-child(2) {
align-self: flex-start; // 使用本身的属性值：flex-start，无视父容器设置的属性值
}
