相关术语

<!--相关术语解释-->
container: 整个flex元素的父元素
item: flex: 元素中的子元素
main axis: 主轴，主轴默认是水平方向从左向右，可以通过flex-direction决定
cross axis: 纵轴，纵轴默认是垂直从上向下，是通过主轴决定的，纵轴方向必须和主轴垂直
main size: 父元素的宽度
cross size: 父元素的高度
main start：主轴开始的地方
main end：主轴结束的地方
cross start：纵轴开始的地方
cross end：纵轴结束的地方

属性总结：6个父元素属性和6个子元素属性

<!--父容器元素元素属和值总结-->
flex-direction: 主轴方向，属性值包括row(默认)，row-reverse, column, column-reverse.
flex-wrap: 决定子容器是否换行排列, 属性值包括nowrap(默认值), wrap, wrap-reverse
justify-content: 定义如何沿着主轴方向排列子容器,属性值包括flex-start(默认值), flex-end, center, space-around, space-between
align-items: 属性用于定义如何沿着交叉轴方向分配子容器的间距,属性值包括flex-start, flex-end, center, stretch(默认), baseline
align-content: 当子容器多行排列，行与行之间的对齐方式,flex-start, flex-end, center, stretch(默认值), 
space-around, space-between

flex-flow:是flex-direction和flex-flow的组合属性

<!--子容器元素元素属和值总结-->
order: 改变子容器的排列顺序，默认值为 0，可以为负值，数值越小排列越靠前
flex-basis: 表示在不伸缩的情况下子容器的原始尺寸。主轴为横向时代表宽度，主轴为纵向时代表高度
flex-grow: 子容器弹性伸展的比例。假设其中的item的flex-grow分别为1，2，剩余空间按 1:2 的比例分配给子容器,如下图所示
flex-shrink: 子容器弹性收缩的比例。假设其中的item的flex-shrink分别为1，2，超出的部分按 1:2 的比例从给子容器中减去，如下图所示i
align-self: 单独设置子容器如何沿交叉轴排列,属性覆盖align-items，属性值和align-items一致
flex: 是flex-grow, flex-shrink, flex-basis的属性融合

flex-grow

flex-shrink

flex

链接参考：一劳永逸的搞定 flex 布局