CSS——Flex弹性布局及flex-grow与flex-shrink的计算

一、Flex布局

flex布局就是将盒子变成弹性盒子，
任何一个盒子都可以变成弹性盒子display: flex
行内元素也可以使用 Flex 布局 display: inline-flex
注意： 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

基本概念
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

二、容器的属性

1、flex-direction属性决定主轴的方向（即项目的排列方向）
2、flex-wrap属性决定如果一条轴线排不下，如何换行
3、flex-flow属性是flex-direction属性和flex-wrap属性的简写形式
4、justify-content属性定义了项目在主轴上的对齐方式
5、align-items属性定义了项目在交叉轴上的对齐方式
6、align-content属性定义了多根轴线的对齐方式

2-1、flex-direction

有四个属性值：
①row（默认值）：主轴为水平方向，起点在左端。
②row-reverse：主轴为水平方向，起点在右端。
③column：主轴为垂直方向，起点在上沿。<