flex伸缩布局

CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box）

Flexbox布局功能主要具有以下几点：
第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；
第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
第五，可以控制元素在页面上的布局方向；
第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

创建一个flex盒子

.flexbox {
  display: flex;
}

通过flex-direction来改变主轴方向修改为column，其默认值是row,横向排列

//改成竖排
.flexbox {
  display: flex;
  flex-direction： column;
}

竖排

如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。

.flexbox {
  display: flex;
  flex-direction： column;
  align-items: flex-end;
}

靠右

.flexbox {
  display: flex;
  flex-direction： row;
  justify-content: flex-end;
}

靠右

当然也可以中间对齐

.flexbox {
  display: flex;
  flex-direction： row;
  justify-content: center;
  align-items: center;
}

水平垂直居中

换行方式 flex-wrap

.flexbox {
  display: flex;
  flex-direction： row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap //不换行
  //flex-wrap: wrap  换行
 // flex-wrap: wrap-reverse 倒序排列
}