CSS之flex布局

什么是flex布局

Flexbox布局,又称Flex布局，弹性盒子布局，就是用来为盒装模型提供最大的灵活性。Flex布局的主要思想是使父容器能够调节子元素的宽度和高度（以及排列顺序），从而能最好的填充可用空间（主要是为了适用所有类型的显示设备和屏幕尺寸）。Flex容器能够放大子元素使之尽可能的填充可用空间，也可以收缩子元素使之不溢出
采用flex布局的元素称为flex容器，它的所有子元素都称为flex项目，就是容器的成员

flex容器属性

1、flex-direction

flex-direction决定了项目在容器中的排列方向
取值有：row | row-reverse | column | column-reverse

row（在列方向上向上顺序排列）：

row-reverse即向下排列

column（在行方向上向右顺序排列）:
column-reverse即向左排列

2、flex-wrap

flex-wrap用于设置项目在容器中排列时如何进行换行
默认情况下，所有项目在都一条线上，flex-wrap属性定义换行方式
flex-wrap有三个属性值：nowrap | wrap | wrap-reverse

默认情况下为nowrap： 不换行

wrap： 换行， 第一行排列完毕后自动切换到第二行排列

wrap-reverse： 换行，但与wrap相反，先排列第二行，第二行排列完毕后再排列第一行，相当于wrap情况下排列完成后，将第二行元素放置于第一行，将第一行元素放置于第二行

3、flex-flow

flex-flow是flex-direction与flex-wrap的简写形式
flex-flow : flex-direction | flex-wrap

4、justify-content

此属性用于设置项目沿主轴方向的对其方式，此属性为较常用的属性

主轴可以理解为容器中间的一条水平的横线

justify-content有5种属性值： flex-start | flex-end | center | space-between | space-around

flex-start: 从主轴线起始部分指向结束部分（默认从左至右）

flex-end：从主轴线末端指向起始端，即从右至左排列

center ： 项目排列在容器的中央

space-between：两端的项目与容器两端的壁相贴，每两个项目的间隔相等

space-around： 每两个项目之间的间隔相等，但两端的项目不与容器两端的壁相贴

5、align-items

align-items用于定义项目在交叉轴（即竖直方向上）如何对齐

align-items： flex-start | flex-end | center | baseline | stretch

flext-start ： 表示项目与容器顶部对齐相贴，且两端与容器两端的壁相贴

flex-end: 与flex-start相反， 项目与容器的底相贴

center： 项目在容器的正中央排列，每个项目在容器上半部分与下半部分的高度相同

stretch：如果项目未设置高度或者设置为auto，则项目拉伸充满容器的高度，排列在容器中

baseline: 项目以第一行的文字为基线进行对齐

6、align-content

align-content相当于一个默认了wrap属性的justify-content，但比其多了一个stretch属性值

flex-start: 项目从容器开始部分开始排列，排满后换至第二根轴线

flex-end： 与flex-start相反，但不是从容器底部开始排列，而是最后一行正好在容器底部

center：项目排列在容器的中央

space-between： 项目之间距离相等，行之间距离相等，且第一行与容器顶部相贴，最后一行与容器底部相贴

sapce-around: 与space-between的区别在于第一行与最后一行都不与容器的壁相贴，而是有一定的距离

stretch： 项目之间距离相等，行之间距离相等，且两个距离也相等，且充满容器的高度

align-content的优先级大于align-items

flex容器中的项目属性

1、order

order用于定义项目的排列顺序，数值越小，排列越靠前，默认都为0，调整项目在容器中的排列顺序时，即可通过调节order的大小
例如： order: 1；

2、flex-grow

flex-grow表示项目的放大比例，默认为0，表示即使容器有空余空间也不放大

flex-grow: 1

例如： 若容器中有一个项目的此属性为2， 其余项目的都为1，则此项目占据的空间比其他项目多一倍

3、flex-shrink

此属性用于定义项目是否缩小，默认为1，当容器空间不足，所有项目将等比例缩小，若有一个为1，其他都为0，则为0的将所有，为1的项目空间不变

4、flex-basis

没用过，默认值为auto，即项目原大小

5、flex

flex是flex-grow，flex-shrink，flex-basis的简写，默认 0 1 auto

6、align-self

此属性可设置单个项目与容器所指定的align-items属性所不同的排列方式
即若容器指定flex-items为flex-start，而此项目设置align-self为flex-end