弹性盒子 display: flex，采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
PS：flex布局首先要理清楚主轴和侧轴，因为flex的属性很多是根据主侧轴进行布局
父容器属性：
flex-direction 设置主轴方向
row 从左向右排列(默认值)
row-reverse 从右向左排列
column 从上往下排列
column-reverse 从下往上排列
//flex.scss
.fix_box { list-style: none;
width: 800px;
height: 500px;
border: 5px solid pink;
display: flex;
flex-direction: column; //设置主轴方向
.item {
width: 80px;
height: 80px;
background-color: yellow;
border: 1px solid black;
text-align: center;
line-height: 80px;
}
}
image.png
justify-content 主轴对齐
flex-start (默认) 元素在开始位置 富裕空间占据另一侧
flex-end 富裕空间在开始位置 元素占据另一侧
center 元素居中 富裕空间 平分左右两侧
space-between 富裕空间在元素之间平均分配
space-around 富裕空间在元素两侧平均分配
//flex.scss.fix_box {
margin: 0;
padding: 0; list-style: none;
width: 800px;
height: 500px;
border: 5px solid pink;
display: flex;
flex-direction: row;
justify-content: space-between; //富裕空间在元素之间平均分配
.item {
width: 80px;
height: 80px;
background-color: yellow;
border: 1px solid black;
text-align: center;
line-height: 80px;
}
}
image.png
align-items 侧轴对齐
flex-start (默认) 元素在开始位置 富裕空间占据另一侧
flex-end 以侧轴结束一侧
center 元素居中 富裕空间 平分左右两侧
.fix_box {
width: 800px;
height: 500px;
border: 5px solid pink;
display: flex;
flex-direction: row;
align-items: flex-end; //flex-end 以侧轴结束一侧
// justify-content: space-between;
.item {
width: 80px;
height: 80px;
background-color: yellow;
border: 1px solid black;
text-align: center;
line-height: 80px;
}
}
image.png
flex-wrap 换行
flex-wrap 换行
nowrap (默认)
wrap 换行
wrap-reverse 反向换行
.fix_box {
width: 800px;
height: 500px;
border: 5px solid pink;
display: flex;
flex-direction: row;
flex-wrap: wrap;
.item {
width: 80px;
height: 80px;
background-color: yellow;
border: 1px solid black;
text-align: center;
line-height: 80px;
}
}
image.png
align-content 堆栈伸缩行
align-content 会更改 flex-wrap(容器换行) 的行为。它和 align-items 相似，但是,不是对齐伸缩项目，它对齐的是伸缩行。
flex-start (默认) 元素在开始位置 富裕空间占据另一侧
flex-end 富裕空间在开始位置 元素占据另一侧
center 元素居中 富裕空间 平分左右两侧
space-between 富裕空间在元素之间平均分配
space-around 富裕空间在元素两侧平均分配
.fix_box {
width: 800px;
height: 500px;
border: 5px solid pink;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: space-around; //富裕空间在元素两侧平均分配
.item {
width: 80px;
height: 80px;
background-color: yellow;
border: 1px solid black;
text-align: center;
line-height: 80px;
}
}
image.png
子容器属性：
order 容器排序
数字越大，顺序越往后，越小越靠前，支持负数
.fix_box { width: 800px;
height: 500px;
border: 5px solid pink;
display: flex;
flex-direction: row;
.item { width: 80px;
height: 80px;
background-color: yellow;
border: 1px solid black;
text-align: center;
line-height: 80px;
}
.item:nth-of-type(1){ order: 1
}
.item:nth-of-type(2){ order: 12
}
.item:nth-of-type(3){ order: 3
}
.item:nth-of-type(4){ order: 4
}
.item:nth-of-type(5){ order: 5
}
.item:nth-of-type(6){ order: 6
}
.item:nth-of-type(7){ order: 7
}
.item:nth-of-type(8){ order: 8
}
.item:nth-of-type(9){ order: 9
}
.item:nth-of-type(10){ order: -1
}
}
image.png
flex 伸缩性
flex: auto
flex: none
flex: number
我这里将每个子容器一共分成55份，flex后面的数字表示55分之几
.fix_box { width: 800px;
height: 500px;
border: 5px solid pink;
display: flex;
flex-direction: row;
.item { width: 80px;
height: 80px;
background-color: yellow;
border: 1px solid black;
text-align: center;
line-height: 80px;
}
.item:nth-of-type(1){ flex:1
}
.item:nth-of-type(2){ flex:2
}
.item:nth-of-type(3){ flex:3
}
.item:nth-of-type(4){ flex:4
}
.item:nth-of-type(5){ flex:5
}
.item:nth-of-type(6){ flex:6
}
.item:nth-of-type(7){ flex:7
}
.item:nth-of-type(8){ flex:8
}
.item:nth-of-type(9){ flex:9
}
.item:nth-of-type(10){ flex:10
}
}
image.png
align-self 子元素侧轴对齐
flex-start (默认) 元素在开始位置 富裕空间占据另一侧
flex-end 富裕空间在开始位置 元素占据另一侧
center 元素居中 富裕空间 平分左右两侧
.fix_box { width: 800px;
height: 500px;
border: 5px solid pink;
display: flex;
flex-direction: row;
.item { width: 80px;
height: 80px;
background-color: yellow;
border: 1px solid black;
text-align: center;
line-height: 80px;
}
.item:nth-of-type(1){ flex:1;
}
.item:nth-of-type(2){ flex:2
}
.item:nth-of-type(3){ flex:3
}
.item:nth-of-type(4){ flex:4
}
.item:nth-of-type(5){ flex:5;
align-self:center; //元素居中 富裕空间 平分左右两侧
}
.item:nth-of-type(6){ flex:6
}
.item:nth-of-type(7){ flex:7;
align-self:center; //元素居中 富裕空间 平分左右两侧
}
.item:nth-of-type(8){ flex:8
}
.item:nth-of-type(9){ flex:9
}
.item:nth-of-type(10){ flex:10
}
}
image.png
margin:auto 居中显示
margin:auto配合
display:flex使用可以直接是子容器居中于父容器当中，可以减少大量css样式操作
.fix_box {
width: 800px;
height: 500px;
border: 5px solid pink;
display: flex;
.item {
width: 80px;
height: 80px;
background-color: yellow;
border: 1px solid black;
text-align: center;
line-height: 80px;
margin: auto; //居中显示
}
}
image.png
作者：饥人谷_米弥轮
链接：https://www.jianshu.com/p/a1ba5a050679
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/3500/viewspace-2813651/ ，如需转载，请注明出处，否则将追究法律责任。
