flex-container:开启flex布局的容器
flex item:里面的元素
主轴main axis:默认横着的
交叉轴(辅轴)cross axis:竖着的向下
开启:
设置flex-container开启flex的方式
display:flex:
/*
让flex容器变成一个块元素还是行内元素
flex块元素
inline-flex行内元素
*/
1.flex-direction:决定主轴的方向
row默认值行 row-reverse
column列 column-reserve
2.justify-content:决定flex item在主轴上的对齐方式
flex-start默认值,主轴的开始位置
flex-end 主轴的结束位置开始
center:居中对齐
space-between:贴边 平分中间
space-evenly:平均分布
space-around:贴边的宽度是元素间宽度的一半
3.align-items:决定了flex item在交叉轴上的对齐方式
normal默认 效果跟stretch一样
stretch:如果flex-items 在交叉轴的方向的size为auto(没设置height),自动拉伸至填充flex container
flex-start:顶部对齐
flex-end:底部对齐
center:居中对齐
baseline:基线对齐(基线:字母x的底部)
默认情况下,flex items都会在同一行显示,放不下时会收缩
4.flex-wrap
nowrap:默认不换行
warp:换行
warp-reserve
5.flex-flow:flex-direction 和 flex-wrap 的缩写属性,顺序不限
6.aline-content:决定多行的flex-items在交叉轴上的对齐方式
flex-item的属性
order-by:决定items的排序
默认值0,可以设置任意整数,值越小越靠前
aline-self:单独决定这个item的对齐方式,覆盖容器的aline-items
flex-grow:决定items如何扩展
默认值0
如果各个元素的值之和大于1,则对齐按设置的值按比例分配
元素的值之和不大于1,则将剩余的size*flex-grow分配给对应元素
flex-shrink:决定items如何收缩
默认值1
flex-basis:主轴上item的size,优先级高于width、height
flex:flex-grow flex-shrink flex-basis的结合