flext弹性盒子属性

盒子容器属性：

1、display: flex  
//设置为弹性盒子

2、flex-direction: 主轴的方向
// row 水平横向  row-reverse 横向反向
// colum 纵向  colum-reverse 纵向反向

3、justify-content: 沿主轴的对齐方式
// flex-start 左 默认
// flex-end 右
// center 居中
// space-between  两端对齐，项目之间间隔相等
// space-around 每个项目两侧间隔相等

4、align-items: 沿侧轴对齐方式
// flex-start 
// flex-end
// center
//baseline 第一行文字基线对齐

5、align-content:子元素中文本沿侧轴方向对齐
// flex-start 左 默认
// flex-end 右
// center 居中
// space-between  两端对齐，间隔平分
// space-around  每个项目之间间隔相等，比边缘多一倍
//stretch  默认值，轴线占满整个侧轴

6、flex-wrap:  规定如果一天轴线排不下怎么换行
// no-wrap : 不换行
// wrap: 换行 第一行在上
// wrap-reverse 换行  最后一行在上

子元素的属性：

1、flex-growth: 伸展值，都为一的话 等分空间

2、flex-shrink: 可接受压缩值。默认为1，设置为0则不缩小。

3、flex-basis: 元素的默认尺寸值

4、flex: 以上三个按顺序写的缩写

5、order: 项目排列顺序，值越小，排列越靠前

6、align-self: 允许单个项目与其他项目排列不同，覆盖align-items属性