flex布局

flex 布局

容器属性

• display: flex 弹性核布局
• flex-direction 设置主轴方向（row(默认)沿水平主轴由左向右排列、row-reverse沿水平主轴由右向左排列、column沿垂直主轴右上到下和column-reverse）
• flex-wrap 是否换行（nowrap(默认)不换行、wrap换行和wrap-reverse）
• flex-flow 合并flex-direction和flex-wrap的功能
• justify-content 主轴方向上的设置

    flex-start：在主轴上由左或者上开始排列
    flex-end：在主轴上由右或者下开始排列
    center：在主轴上居中排列
    space-between：在主轴上左右两端或者上下两端开始排列
    space-around：每个项目两侧的间隔相等。所以，项目之间
    的间隔比项目与边框的间隔大一倍

• align-items 交叉轴方向的设置