【CSS基础】Flex弹性布局

在flex容器中默认存在两条轴，水平主轴和垂直的交叉轴，这是默认设置，当然可以通过修改相关属性使垂直方向变为主轴，水平方向变为交叉轴，在容器中，每个单元块称为flex item，每个flex item占据主轴空间为main size，占据交叉轴空间为cross size。

Flex容器

首先实现flex布局需要先指定一个容器，任何一个容器都可以被置顶为flex布局，这样容器内的元素就可以使用flex来进行布局。

生成一个块状的flex容器盒子，生成一个行内flex容器盒子，以下六种属性可以设置在容器上：

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

flex-direction

flex-direction决定了主轴的方向，默认值是row。

flex-wrap

flex-wrap决定容器内项目是否可换行，默认值nowrap。

flex-flow

flex-flow是flex-direction和flex-wrap的简写，其默认值为row nowrap。

justify-content

justify-content定义了项目在主轴上的对齐方式，默认值为flex-start

align-items

align-items定义了项目在交叉轴上的对齐方式，默认值为stretch

align-content

align-content：定义了多根轴线的对齐方式，如果项目只有一个轴线，那么该属性将不起作用。比如flex-wrap:nowrap;容器只有一根轴线，align-content就不起作用。默认值为stretch。当存在多条轴线时，多条轴线在垂直方向上的布局。

flex项目

有以下6中定义在item上的属性：

order

flex-basis

flex-grow

flex-shrink

flex

align-self

order

order定义项目在容器中的排列顺序，数值越小排列越靠前，默认值为0。

flex-basis

flex-basis定义了在分配多余空间之前，项目占据主轴空间，浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目本身的宽高。flex-basis需要跟flex-grow和flex-shrink配合使用才能发挥效果。

flex-grow

flex-grow定义项目的放大比例，默认值为0，即若果存在剩余空间，也不放大。当所有项目的flex-grow属性值为1，则它们将等分剩余空间，如果一个项目flex-grow为2，其他为1，则前者占据的剩余空间将比其他项多一倍。如果所有项flex-basis的值排列完后发现空间不够，且flex-wrap:nowrap时，此时flex-grow则不起作用。

flex-shrink

flex-shrink定义项目的缩小比例，默认值为1，若空间不够，且所有项的值为1，则所有项等比例缩小，如果一项flex-shrink属性为0，其他项都为1，则前者不缩小。

flex

flex是flex-grow、flex-shrink、flex-basis三个属性的缩写。

align-self

algn-self允许单个项目有与其他项目不一样的对齐方式，单个项目的algn-self会覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性。