CSS布局

一.Flex简介

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
注:主轴与侧轴的概念
主轴就是弹性盒子子元素沿着排列的轴;与主轴垂直的轴称为侧轴。
如果你有 row,则主轴是水平方向，侧轴是垂直方向如果你有 column,则主轴是垂直方向，侧轴是水平方向

二.弹性布局的属性

1.display: flex

flex-flow (适用于父类容器上)复合属性。
设置或检索伸缩盒对象的子元素排列方式。可以同时设置
<style>
.main {
  width: 100%;
  height:100%;
  background: #72f884;
  /* 使用flex弹性布局 */
  display: flex;
}
</style>

2.flex-direction

flex-direction属性决定主轴的方向，即项目（或者说是子盒子）的排列方向。
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

3.justify-content

该属性定义了项目在主轴上的对齐方式。

它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

此时主轴（flex-direction）为默认的row，即水平方向，从左到右。
flex-start（默认值）：左对齐（即上面页面展示效果）
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
<style>
.right{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
}
</style>

4.align-items

该属性定义项目在交叉轴上如何对齐。（如果主轴为水平，那么交叉轴就是垂直）

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
<style>
.main {
  width: 100%;
  height:100%;
  background: #72f884;
  /* 使用flex弹性布局 */
  display: flex;
 align-items:fles-start;
}
</style>

5.flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。在宽度总和超出父盒子的宽度时，希望保持每个子盒子的准确宽度，那就只能分行排列
nowrap（默认值）：不换行。
wrap：换行。
wrap-reverse：换行，第一行在下方。 
<style>
.main {
  width: 100%;
  height:100%;
  background: #72f884;
  /* 使用flex弹性布局 */
  display: flex;
  /* 使用flex-wrap，wrap为允许换行，nowrap为不允许换行 */
  flex-wrap: wrap;
}
</style>