flex详解

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