1、align-self 项目对齐方式
(1)align-self属性表示当前项目可以和其他项目拥有不一样的对齐方式。
(2)取值
- auto(默认值):和父元素align-self的值一致,具有继承性
- flex-start:该项目顶端对齐
- flex-end:该项目底部对齐
- center:竖直方向上居中对齐
- baseline:item第一行文字的底部对齐
- stretch:当item未设置高度时,item将和容器等高对齐
(3)上机实例
.box{
width: 500px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
background-color: #ccc;
}
.box .box1{
width: 100px;
height: 100px;
}
.box .box1:nth-of-type(1){
background-color: pink;
}
.box .box1:nth-of-type(2){
background-color: skyblue;
align-self: flex-start; 该项目居上排列
/* align-self: flex-end; 该项目居下排列 */
/* align-self: center; 该项目居中排列 */
/* align-self: auto; 默认值 继承父元素 */
/* align-self: baseline;与第一个项目的第一行文字对齐 */
}
.box .box1:nth-of-type(3){
background-color: orange;
}
(4)运行效果
2、order 项目排列方式
(1)order属性设置项目排序的位置,默认值为0,数值越小越靠前,可以为正,可以为负
(2)上机实例
.box .box1{
width: 100px;
height: 100px;
}
.box .box1:nth-of-type(1){
background-color: pink;
order: 0;
}
.box .box1:nth-of-type(2){
background-color: skyblue;
order: -8;
}
.box .box1:nth-of-type(3){
background-color: orange;
order: 5;
}
(3)运行结果
3、flex-grow 项目大小比例
(1)flex-group属性用来
控制当前项目是否放大显示。默认值为0
(2)上机实例
.box .box1{
width: 100px;
height: 100px;
}
.box .box1:nth-of-type(1){
background-color: pink;
}
.box .box1:nth-of-type(2){
flex-grow: 2;
}
.box .box1:nth-of-type(3){
background-color: orange;
flex-grow: 1;
}
(3)运行效果
4、flex-shrink 项目缩小比例
(1)flex-shrink属性表示元素的缩小比例。默认值为1,如果空间不够用时所有的项目同比缩小。如果一个项目的该属性设置为0,则空间不足时该项目也不缩小。
(2)上机实例
.box .box1{
width: 200px;
height: 200px;
}
.box .box1:nth-of-type(1){
background-color: pink;
flex-shrink: 2;
}
.box .box1:nth-of-type(2){
background-color: skyblue;
flex-shrink: 0;
}
.box .box1:nth-of-type(3){
background-color: orange;
flex-shrink: 1;
}
(3)运行效果
5、flex 简写
(1) flex属性是 flex-grow属性、flex-shrink属性、flex-basis属性的简写。默认值为:0 1 auto;
(2)取值
- auto:等价于 1 1 auto。也就是允许增长,允许缩小,宽度为自动。
- none:等价于 0 0 auto。也就是不允许增长,不允许缩小,宽度为自动。
- 非负数字:这个数字表示的是 flex-grow的值, flex-shrink为1,表示允许缩小。
(3)上机实例
.box .box1{
width: 200px;
height: 200px;
}
.box .box1:nth-of-type(1){
background-color: pink;
flex: 1;
/* flex:0 1 auto;默认值 */
}
.box .box1:nth-of-type(2){
background-color: skyblue;
/* flex: auto; 等价于 1 1 auto。也就是允许增长,允许缩小,宽度为自动。 */
}
.box .box1:nth-of-type(3){
background-color: orange;
/* flex: none; 等价于 0 0 auto。也就是不允许增长,不允许缩小,宽度为自动。 */
}
(4)运行效果