flex实现简单常用布局

相对于用css的定位、浮动来布局，使用flex布局能快速简单的实现一些常用布局

下面的案列只展示了核心代码，没有具体样式

一、正居中

// css
.content{
    display: flex;
    justify-content: center;
    align-items: center;
}
// html
<div class="content">
    <div />
</div>

justify-content 主轴布局

• flex-start（默认值）：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等。
• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

• space-evenly：每个项目的间隔相等，并且和边框间隔也相等

align-items 交叉轴布局

• flex-start：交叉轴的起点对齐。
• flex-end：交叉轴的终点对齐。
• center：交叉轴的中点对齐。
• baseline: 项目的第一行文字的基线对齐。
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

二、三明治布局（左中右，上中下）