flex弹性盒布局详细讲解

一.如何将一个容器设置为弹性容器

要想将一个容器变为弹性容器，只需指定它的display为flex或者inline-flex。
指定一个容器为块级弹性容器

display: flex;

指定一个容器为行内弹性容器

display: inline-flex;

弹性容器内的的元素被称为弹性元素，也被叫做项目，弹性元素会失去原有的类型特性（比如块级元素会不占一行）
同时，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

总的来说，设置弹性容器后，弹性元素会受制于弹性容器。

二.设置弹性容器中弹性元素的排列方式

flex-deretion属性

设置弹性元素的flex-deretion就可指定弹性元素的排列方式

属性值	说明
row	默认值，弹性元素水平排列
cloumn	弹性元素垂直排列
row-reserve	指定弹性元素水平方向排列
column-reverse	指定元素垂直反向排列

效果图：

三.设置弹性元素的换行

flex-wrap属性

flex-wrap属性用于设置弹性元素的换行。

属性值	说明
wrap	指定弹性元素自动换行
nowrap	默认值，指定弹性元素不换行
wrap-reserve	指定弹性元素自动反向换行

如下，当浏览器窗口过小是，会造成flex-box元素内的孩子溢出。

此时修改flex-box元素的换行，便可防止溢出了。

四.主轴与垂轴

1.概念

主轴（main axis）：主轴规定了弹性元素排布的顺序
垂轴（cross axis）：垂轴决定了弹性元素在发生换行后，第二行元素的添加方向

垂轴时时刻刻和主轴相互垂轴。
在主轴上，内容开始的那一边被称为起边（main start），内容流向的那一端，被称为终边（main end）。
同理，在垂轴上，内容开始的那一边被称为起边（acoss start），内容流向的那一端，被称为终边（acoss end）。

2.flex-deretion和flex-wrap对主轴和垂轴方向的影响

flex-deretion决定了主轴的方向
在默认情况下（flex-deretion: row），主轴的方向是水平向右的，盒子会这样排列

当给flex-deretion不同的属性值是，产生如下现象（此图取至《零基础入门学习Web开发》）

同样的，flex-wrap决定了垂轴的方向，值得注意的是，只有当flex-wrap不是nowrap，垂轴的方向才有意义。
这里同样引用图片，不再赘述。

补充：flex-flow是flex-deretion和flex-wrap的复合属性，第一个值是flex-deretion，第二个值是flex-wrap。

五.主轴与垂轴上的对齐方式

justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。

属性值	说明
flex-start	默认值，弹性元素靠主轴起边
flex-end	弹性元素靠主轴终边
center	弹性元素在主轴居中
space-between	第一个元素靠主轴起边，最后一个元素靠主轴终边，其他元素均匀排放
space-around	所有弹性元素均匀排放，元素之间的间距不折叠
space-evently	所有元素均匀排放，元素间的间距折叠

效果图如下：

align-items属性

align-items属性定义弹性元素在垂轴上如何对齐。

属性值	说明
flex-start	默认值，弹性元素靠垂轴起边
flex-end	弹性元素靠垂轴终边
center	弹性元素在垂轴居中
baseline	弹性元素向基线对齐
stretch	默认值，弹性元素拉伸以占据整个垂轴的尺寸

效果图如下：
以主轴水平向右为例

注：在bseline中的黑线，就是文字的基线。

align-content属性

align-content和align-items的作用是一样的，决定了弹性元素在垂轴上的对齐方式，属性值略有不同。

align-content的属性值和说明如下：

属性值	说明
flex-start	默认值，弹性元素靠垂轴起边
flex-end	弹性元素靠垂轴终边
center	弹性元素在垂轴居中
space-between	第一个元素靠垂轴起边，最后一个元素靠垂轴终边，其他元素均匀排放
space-around	所有弹性元素在垂轴均匀排放，元素之间的间距不折叠
stretch	默认值，弹性元素拉伸至占满整个垂轴

效果图不再展示，主要讲一下align-content和align-items的区别

属性	说明
align-content	以整个弹性元素进行定位
align-items	以弹性元素的内容进行定位

以属性值为center来展示他们的区别

可以较为明显的看到，align-content中的弹性元素的顶边是对齐的，align-items是不对齐的，它们是以中心线对齐的。

align-self

align-self为弹性元素单独设置在垂轴上的对齐方式，默认值为auto，设置align-self时，会覆盖align-items。

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

属性值	说明
auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”
flex-start	默认值，弹性元素靠垂轴起边
flex-end	弹性元素靠垂轴终边
center	弹性元素在垂轴居中
stretch	弹性元素拉伸至占满整个垂轴
baseline	元素位于容器基线上

order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

默认项目的排列顺序是按我们代码中的顺序来排列的，写在前面的排在前面。现在可以通过设置order属性来改变排列顺序。

六.“弹性”

flex-shrink属性

之所以flex叫做弹性盒布局，是有原因的。但弹性元素的总宽度不超过弹性容器的宽度，则弹性元素正常显示。但如果弹性元素的总宽度超过弹性容器的宽度，弹性容器便会体现他的“弹性”，为了防止弹性元素溢出，弹性容器会压缩弹性元素，使其不溢出（外边距和内边距无法压缩，压缩其内容）。如果超过可以压缩的内容，弹性元素仍然会溢出。

在压缩过程中，控制各个弹性元素压缩比例的属性就叫做flex-shrink属性。

flex-shrink属性值默认是1，负值对该属性无效，为0时代表不压缩该弹性元素。
ps：现在各个弹性元素的flex-shrink属性分别为1，2，2。而需要压缩的总空间是250px，则分配给各个元素的可压缩空间就是50px，100px，100px。

flex-grow属性

​ 与flex-shrink相反，但弹性容器仍有剩余空间时，设置它的属性值可以给弹性元素分配空间，使其放大。

flex-grow: <number>; /*default 0*/

各个弹性元素flex-grow的默认值是0，代表不放大。

分配空间是按照各个弹性元素flex-grow的比例分配。

flex-basis属性

flex-basis设置弹性元素在没有使用flex-shrink和flex-grow属性值时在主轴上的初始尺寸。其默认值时auto，表示原来的的尺寸。

flex-basis: <length> /*default：auto*/

当主轴时水平的时候，设置flex-basis与设置width是一样的效果。

当主轴垂直时，设置flex-basis与设置height是一样的效果。

（注：当主轴水平时，flex-basis会覆盖width，当主轴垂直的时候，flex-basis会覆盖width。）

flex属性

flex是复合属性，代表flex-grow，flex-shrink，flex-basis的简写，默认是 0 1 auto。另外有两个快捷属性可以选择。

flex: <flex-grow flex-shrink flex-basis> /*default: 0 1 auto*/
flex:auto /*1 1 auto*/
flex:none /*0 0 auto*/