CSS3 Flexbox布局

CSS: Flexbox布局

早期布局主要依赖表格，后来有绝对定位、浮动定位的出现，在CSS3中引入了Flex-box布局，伸缩布局盒模型。主要思想是让容器有能力让其子项目能够改变其高度，宽度，甚至顺序，以最佳的方式填充空间。以简单的方式实现复杂的布局。用Flexbox布局有两部分组成，一个是Flex容器Flex Container,一个是Flex里面的项目Flex Item.在容器上有横着的主轴main axis,竖着的叫做cross axis.在主轴上最左边的点叫做主轴的起点main start.最右边的点叫做main end,主轴的终点.在cross axis上也有两个点，上面那个是cross start,下面那个是cross end.在每一个项目中水平的尺寸叫做main size,垂直的高度叫做cross size.

设置Flex容器。

首先我们写一个元素

默认情况下他们是这样显示的：按照块级元素从上到下。

接下来我们设置这个容器为Flex容器：

我们会发现Flex容器里的元素在一排显示。

项目的排列方向

在Flex容器上面我们可以用这个属性来控制项目的排列方式，这个属性主要设置的就是,也就是主轴的方向。有两个主要的方向，一个是,水平方向。另一个是,就是垂直的方向。

我们改变我们的样式为：

此时我们的项目会水平排列，并且row是默认值。除此之外row-reverse可以设置项目反向排列，也就是从右向左。同理如果我们设置为column的话项目就会从上往下排列，同样的column-reverse可以让我们的项目从下往上排列。

换行显示

Flex容器中的项目默认的话会在同一行显示，通过我们可以设置项目是否要多行显示。

增加我们的项目：

增加样式：

你就会发现每行的项目数目会根据容器的宽度多行显示。同样的wrap-reverse会颠倒我们的项目。

上面两个属性我们还可以用一个flex-flow共同设置：

justify-content

这个属性可以帮助我们设置项目的位置以及各自之间的间隔。默认值：flex-start.flex-end为右对齐，center为左对齐。space-between会在项目间设置间隔。但是项目与容器间是没有间隔的，如果需要的话可以用space-around.

align-items

这个属性可以设置项目在垂直方向上的对齐方式，我们的项目高度默认是和容器高度相等，容器高度大的话我们的项目就会去拉伸，这也就对应了他的默认属性stretch.除此之外，align-start会让我们的项目靠着容器顶部去显示，flex-end则是在底部显示。居中的话是center,如果项目垂直方向上对齐方式不同，我们可以用baseline属性，然后去指定各自顶部的内边距。

多行项目的对齐方式align-content.

默认值stretch,拉伸显示的方式。还可以设置flex-start,flex-end,center.他们都是不拉伸的显示方式。space-between可以在行与行之间设置间隙。space-around会在行的周围也就是上下添加间隔，间隔大小就看容器剩余了多少空间。

项目的顺序

Flex容器中项目的默认属性就是我们书写HTML代码时的顺序，但是我们可以用order去改变它。默认情况下所有项目的order属性的值都为0，我们可以把第一个项目放到最后：

这样的话因为1在0的后面，所以第一个项目就会到最后面。类比如果想让哪个元素排到最前面，设置他的order为-1即可。

项目水平宽度

Flex项目默认的水平宽度是它里面内容的宽度。在水平方向上如果我们想设置项目的宽度从而适应视口的宽度，flex-grow属性的默认值为0，将其改变为1就可以实现：

此时我们的项目会在水平方向上铺满屏幕，flex-grow还可以单独的设置某个元素，通过改变数字的大小控制他的宽度。

可以设置项目初始的宽度，默认是auto.

flex-shrink默认值为1，我们可以将某个项目设置为0，他的宽度就不会随着视口的减小而减小。设置的值大的话，在我们缩小页面的时候就会发现它缩小的最多。

上面三个属性可以用一个flex全部设置flex: flex-grow flex-shrink flex-basis;.

align-self

在项目中使用这个属性就可以单独设置他的垂直对齐方式，包括：flex-start,flex-end,center,stretch等等。