1 基础概念
①母元素和子元素
采用Flex布局的元素为，称为 Flex容器(母元素)
容器的直接子元素称为 Flex项目(子元素)
②主轴和侧轴
主轴和侧轴可转换,转换属性为flex容器的flex-direction
如果flex-direction为row，则主轴是水平方向，如果是column，则主轴是垂直方向
![https://user-gold-cdn.xitu.io/2018/1/22/1611cc8a90e05b23?imageView2/0/w/1280/h/960/format/webp/ignore-error/1]
2 容器属性
主轴方向：水平排列（默认） | 水平反向排列 | 垂直排列 | 垂直反向排列
flex-direction: row | row-reverse | column | column-reverse;
换行：不换行（默认） | 换行 | 反向换行(第一行在最后面)
flex-wrap: nowrap | wrap | wrap-reverse;
主轴对齐方式：起点对齐（默认） | 终点对齐 | 居中对齐 | 两端对齐 | 分散对齐
justify-content: flex-start | flex-end | center | space-between | space-around;
交叉轴对齐方式：拉伸对齐（默认） | 起点对齐 | 终点对齐 | 居中对齐 | 第一行文字的基线对齐
align-items: stretch | flex-start | flex-end | center | baseline;
3 项目属性
顺序：数值越小越靠前，默认为0
需要子元素都写出order
order: <number>;
放大比例：默认为0，如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推
(理解:独占几份剩余空间)
flex-grow: <number>;
缩小比例：默认为1，如果空间不足则会缩小，值为0不缩小
flex-shrink: <number>;
项目自身大小：默认auto，为原来的大小，可设置固定值 50px/50%
flex-basis: <length> | auto;
flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
flex:none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
项目自身对齐：继承父元素（默认） | 起点对齐 | 终点对齐 | 居中对齐 | 基线对齐 | 拉伸对齐
align-self: auto | flex-start | flex-end | center | baseline | stretch;
本文参考了掘金文章如下:
作者：Aitter
链接：https://juejin.im/post/589965c9128fe1006569cc9d
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
网友评论