Flex布局

Flex布局
Flex基本概念：

在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴

在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。
Flex容器：
.container {
display: flex | inline-flex;
}

1. flex-direction: 决定主轴的方向(即项目的排列方向)
   .container {
   flex-direction: row | row-reverse | column | column-reverse;
   }
   
   

2. flex-wrap: 决定容器内项目是否可换行
   .container {
   flex-wrap: nowrap | wrap | wrap-reverse;
   }
   默认值：nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。
   

3. flex-flow: flex-direction 和 flex-wrap 的简写形式

4. justify-content：定义了项目在主轴的对齐方式。
   .container {
   justify-content: flex-start | flex-end | center | space-between | space-around;
   }

5. align-items: 定义了项目在交叉轴上的对齐方式
   
   

align-self: 允许单个项目有与其他项目不一样的对齐方式
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
align-items 属性时一样的，只不过 align-self 是对单个项目生效的，而 align-items 则是对容器下的所有项目生效的。

6. align-content: 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用
   .container {
   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
   }

效果在下方代码内，以及圣杯布局和双飞翼布局

html document