CSS世界（六）Flex 布局

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

多行多列布局

css

.content-wrapper{
    display: flex;
    flex-wrap: wrap;
    width: 500px;
    margin-top:100px;
    margin-left: 100px;
}

.content-item-left {
   height: 100px;
   width: 33%;
   margin-top: 1px;
   background-color: red;
}

.content-item-right{
   height: 100px;
   width: 66%;
   margin-top: 1px;
   background-color: blue;
}

html

<div class="content-wrapper">
     <div class="content-item-left"></div>
     <div class="content-item-right"></div>
     <div class="content-item-left"></div>
     <div class="content-item-right"></div>
</div>

flex

    .content {
        display: flex;
    }

css设置diplay:flex; 时其他可选属性

flex-direction: 布局排列方向 [column-reverse|column|row-reverse|row]
flex-wrap: 换行方式，默认不换行[nowrap] , [wrap] 
flex-flow: 组合属性， flex-direction+ flex-wrap
justify-content: 主轴对齐方式 flex-start|flex-end|center|space-between|space-around|initial|inherit;
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项保持不同