flex概念
image.png
flex布局是块级元素；inline-flex是行内元素不会换行
flex相关属性
image.png
flex-direction
image.png
image.png
justfy-content
flex item在x轴/main axis主轴上的对齐方式，居左，居右，居中等
image.png
align-item
flex item在y轴/cross size交叉轴 上的对齐方式，顶部对齐，其实就是y轴上对齐哪个位置，以哪个y坐标为准对齐的意思
normal是没有设置高度的时候，自动拉伸填充
image.png
根据文字 的第一行对齐
display:flex;
align-item:flex-end;
end对齐
flex-wrap
display:flex;flex-wrap:wrap;
image.png
align-content
image.png
align-conten:flex-start;
image.png
align-conten:flex-end;
image.png
align-conten:space-evenly;
image.png
flex container属性总结
image.png
image.png
flex items属性的使用
order
image.png
.box{
display:flex
}
image.png
image.png
image.png
align-self
image.png
//单独设置,覆盖父元素的align-item
.item3{
align-self:flex-end
}
image.png
flex-grow伸展
image.png
1、铺满场景
场景是每个item是100px，但是大的布局是500，3个item宽度只有300px，未占满整个布局，需要铺满，使用flex-grow：1；
.box{
width:500px;
}
.item{
width:100px;
}
image.png
image.png
2、flex-grow总和比1大的场景
如果，flex-grow:2 2 1;分成5份，分别占比2/5，2/5，1/5布局如下
image.png
3、flex-grow总和比1小的场景
image.png
flex-shrink收缩比例
image.png
flex-basis
改变flex-item的宽度
image.png
flex
image.png
