flex-direction:主轴方向
row(默认值):水平显示,起点在左端
row-reverse:水平显示,起点在右端和row相反
column:垂直显示,起点在顶部
column-reverse:垂直显示,起点在底部和column相反
flex-wrap:是否换行
nowrap(默认值):不换行
wrap:按正常方向换行,第一行在上方
wrap-reverse:按反方向换行,第一行在下方
justify-content:主轴对齐
flex-start(默认值):主轴方向起点对齐
flex-end:主轴方向终点对齐
center:主轴方向居中对齐
space-between:主轴方向两端对齐,元素之间的间距相等
space-around:每个元素两侧的间隔相等。每个idiv 左右方向的margin相等。两个div中间的间距会比较大
align-ltems:交叉轴对齐
stretch(默认值):占满整个父布局
flex-start:起点方向对齐
flex-end:终点方向对齐
center:居中对齐
baseline:元素第一行文字的基线对齐
align-content:多行对齐,只有一行不起作用
flex-start(默认值):起点对齐
flex-end:终点对齐
center:居中对齐
stretch:沾满整个屏幕
space-between:两端对齐:元素之间的间距平均分配
space-around:每行元素的两侧的间隔相等,中间的是两侧的两倍
Align Self:规定容器内被选中项目的对齐方式。
auto:默认值:元素继承他的父元素的align-items属性。如果没有父元素则为"stretch"
stretch: 元素撑满容器
center:居中
flex-start:元素在容器的起点
flex-end:元素在容器的终点
baseline:元素在容器的基线上
initial:设置该属性为他的默认值
inherit:从父元素继承该属性