6. CSS之Flex 布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性

flex

    .content {
        display: flex;
    }

属性

flex-direction: 布局排列方向 
flex-wrap: 换行方式，默认不换行
flex-flow: 组合属性， flex-direction+ flex-wrap
justify-content: 主轴对齐方式
align-items: 交叉轴对齐方式
align-content: 多根轴线的对齐方式设置

flex item, 布局每项属性

flex-grow  空间增长度 默认0 ； 即存在剩余空间也不增长
flex-shrink  空间缩小度 默认1 ； 即空间不足就缩小
flex-basis  默认auto ； 也可固定数值
flex    组合属性，以上三个的组合 默认-0 1 auto;
order    排序优先级  越小 越靠前; 默认0
align-self 默认继承父集的align-items; 可覆盖 且能与其他item项保持不同