父元素容器属性
- flex-direction： row(默认)、row-reverse、column、column-reverse
row： 横向正序排列子元素
colimn： 竖向正序排列子元素
row-reverse 横向倒序排列子元素
column-reverse 竖向倒序排列子元素 - flex-wrap：nowrap（默认）、wrap、wrap-reverse
nowrap： 不换行（子元素强行等分容器宽度）
wrap： 换行（子元素固定宽度，超出即换行从顶部向下）
wrap-reverse： 同wrap，超出从底部向上换行 - flex-flow：flex-direction和flex-wrap的简写集合，默认为横向不换行
值==》flex-direction,flex-wrap - （设置x轴）justify-content：flex-start（默认）、flex-end、center、space-between、space-around、space-evenly
flex-start：左对齐
flex-end： 右对齐
center： 居中
space-between：左右两侧紧贴容器，子元素间距相同
space-around： 子元素间距为左右两侧距离容器边侧两倍值
space-evenly： 子元素间距与边距相同 - （设置y轴）align-items：flex-start、flex-end、center、baseline、stretch（默认）
stretch：子元素不设置高度（高度与容器相同）
flex-start：子元素紧贴容器顶部
flex-end： 子元素紧贴容器底部
center： 子元素居中排列
baseline： 以子元素第一行文字高度为基线排列 - align-content：flex-start、flex-end、center、space-between、space-around、space-evenly、stretch（默认）
控制多行项目对齐方式，只有一行不起作用
stretch：项目未设置高度或高度为auto时填满整个容器
flex-start、center、flex-end与align-items相同
space-around、space-between、space-evenly与justify-content相同
子元素属性
order（排列顺序）、flex-grow（是否放大）、flex-shrink（是否缩小）、flex-basis（设置width，权重高于width属性）、flex（缩放宽度属性集合）、align-self（继承父元素的align-items属性）
- order： 默认0，数值越小排列越靠前
- flex-grow： 默认0，有剩余空间时是否放大（默认不放大，值为数字）
- flex-shrink： 默认1，空间不足时等比缩小，为0时空间不足自身也不会缩小
- flex-basis： 默认auto，保持默认宽度或以width为自身宽度，值等同于width且权重高于width
- flex： 默认0 1 auto ，flex-grow、flex-shrink、flex-arsis集合缩写，定义项目放大、缩小、宽度
快捷值：auto（1 1 auto）等分放大缩小 none（0 0 auto）不放大，但等分缩小 - align-self： 默认auto（无父元素默认值为stretch），与align-items相同