容器默认存在两根轴:
水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
1.容器的属性
flex-direction 方向
flex-wrap 是否换行
flex-flow 方向 好换行 的简写。默认 row 和 nowrap
**justify-content** 主轴的排序方式 [ˈdʒʌstəˌfaɪ] 整理版面;
重点:
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐,项目之间等距离隔开
space-around 每个项目两侧相等。
align-items 交叉轴的排列方式
flex-start 靠上
flex-end 靠底
flex-center 居中
baseline 项目的第一行文字的基线对齐
stretch 默认,占满
align-content 多轴的情况
6个属性设置在项目上。
order 数值越小,排列越靠前,默认为0。
flex-grow 放大比例,默认为0,即如果存在剩余空间,也不放大
flex-shrink 缩小比例,默认为1,即如果空间不足,该项目将缩小
flex-basis 项目固定大小
flex 放大,放小,固定大小,三个的简写
align-self 交叉轴上 特定效果