Flex布局

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>  
  <div>5</div>  
  <div>6</div>  
</div>

.flex-container {
  display: flex;

  flex-direction：row;
  flex-wrap:wrap;
  justify-content:space-between	;
  align-content:space-between ;
}

1、 flex-direction（主轴方向）

• row //横向显示
• column //垂直显示
• row-reverse //倒序横向显示
• column-reverse //倒序垂直显示

2、 flex-wrap（是否换行）

• nowrap //不换行
• wrap //换行
• wrap-reverse //倒序换行

3、 justify-content（主轴对齐方式）

• flex-start //主轴的起点对齐
• flex-end //主轴的终点对齐
• center //居中对齐
• space-between //两端对齐，项目之间的间隔都相等
• space-around //每个项目两侧的间隔相等

4、 align-content（非主轴对齐方式）

• flex-start //交叉轴的起点对齐
• flex-end //交叉轴的终点对齐
• center //居中对齐
• space-between //两端对齐，项目之间的间隔都相等
• space-around //每个项目两侧的间隔相等
• stretch //如果项目未设置高度或设为auto，将占满整个容器的高度

5、align-items （针对子项）

• flex-start //交叉轴的起点对齐
• flex-end //交叉轴的终点对齐
• center //居中对齐
• baseline //项目的第一行文字的基线对齐
• stretch //如果子元素未设置高度或设为auto，将占满整个容器的高度