浅谈flex布局

一、flex布局的基础

通过给一个元素设置 display: flex； 属性。 此时该元素为flex-container，即flex容器，它的所有子元素成为flex-item,即项目。所有子元素的float, vertical-align,clear属性将失效。

<style>        .flex-container{          display: flex;        }</style>

容器默认存在两条轴线，水平的主轴(main axis)和交叉轴(cross axis)，水平轴和边界的交点的起点称为main start, 终点称为main end； 交叉轴与边界的交点的起点称为cross start, 终点称为 cross end； 每一个flex item 占据的主轴空间称为main size， 垂直空间称为 cross size。

二、容器的属性

flex-container 有六个属性可以设置：

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

2.1 flex-direction

flex-direction 决定着主轴以及主轴的方向。 换句话说就是决定，main-axis以及cross-axis谁是主轴及main-start,main-end/cross-start,cross-end之间的关系。

flex-direction有四个值可以选择：

• row
• row-reverse
• column
• column-inverse

当设置flex-direction: row 时；

<style>        .flex-container {            display: flex;            flex-direction: row;            background-color: #2aabd2;            width: 500px;            height: 500px;        }        .flex-item {            background-color: yellow;            height: 100px;            width: 100px;            margin: 20px;        }    </style>

效果图：

当设置为flex-direction: row-reverse时：

flex-direction: row-reverse;

效果图：

当设置flex-direction: column时：

flex-direction: column;

效果图：

当设置为flex-direction:column-reverse时:

flex-direction: column-reverse;

效果图：

2.2 flex-wrap

    注意到，我们在上方的例子中, flex-container的width及height 是大于4个flex-item的width之和，以及height之和的。 当 子元素的宽度之和或高度之和大于容器的总宽度或总高度时，是怎样的排列方式？     flex-wrap属性就决定了这个特性。 flex-wrap有三个值可选：     - nowrap: flex容器为单行。该情况下flex子项可能会溢出容器     - wrap:   flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行     - wrap-reverse:  反转 wrap 排列

还是用上面的例子，但是改变一下子元素的大小。

<style>        .flex-container {            display: flex;            flex-direction: row;            background-color: #2aabd2;            width: 500px;            height: 500px;        }        .flex-item {            background-color: yellow;            height: 100px;            width: 150px;            margin: 20px;        }    </style>

当不设置为flex-wrap时 默认为nowrap, 这种情况下，虽然子元素的宽度之和大于容器之和，但是所有子元素依然只是排成一列。改变了子元素的大小。

当设置为flex-wrap: wrap 时 子元素会发生断行，使子元素展现出原本的大小。

flex-wrap: wrap;

当设置为flex-wrap: wrap-reverse时， 调换了main-start 以及 main-end的位置。重新进行排列。

flex-wrap: wrap-reverse;

总结:     flex-wrap的排列是以flex-direction的属性值为基础的。 当flex-direction属性值为row时， flex-wrap便只关注width的值，当items的总宽度小于container的宽度时，不换行正常排列； 当items的总宽度大于container的宽度时，items的宽度会被改变缩小，将其容纳在一行里， 但若flex-wrap设为wrap时，为了正常显示子元素的大小，子元素会进行换行。 在上述情况下，container对子元素的height不关注，无论height的值为多少，在容器中都会正常显示，即有可能会溢出容器外。     当flex-direction的值设为column时， flex-wrap的排列原理与上述是一样的，在此不再赘述。 注意的是，此时关注的是子元素的height值，即无论子元素的width为多少，都会正常的显示。    还有一点， 记住在后面加了reverse的所有属性值，只是将起点main-start/cross-start和终点main-end/cross-end对换了而已。

2.3 flex-flow

flex-flow 是 flex-direction 和 flex-wrap 的结合。 默认值为 row nowrap。
不必多说了。

2.4 justify-content

 justify-content 设置了子元素在主轴上的对齐方式。 justify-content有以下属性值：

• flex-start 弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
• flex-end 弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐。
• center 弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐，同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距（如果剩余空间是负数，则保持两端相等长度的溢出）。
• space-around 弹性盒子元素会平均地分布在行里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于’flex-start’。在其它情况下，第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
• space-between 弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于’center’。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。

当items总宽度之和远小于container的宽度时，比较容易看到该效果。

设置justify-content: flex-start时：

设置justify-content: flex-end时：

设置justify-content: center时：

设置justify-content: space-around时：

设置justify-content: space-between时：

justify-content的属性值原理很简单，但是需要注意它是和主轴相关的，也和主轴的方向有关，在使用时需要注意到flex-direction的值。

2.5 align-items

align-items 关注的是子元素在容器交叉轴(cross-axis)的对齐方式。 有以下属性值：

• flex-start: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

• flex-end: 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

• center: 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

• base-line: 如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

• stretch: 如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

当align-items设置为flex-start时：

当align-items设置为flex-end时：

当align-items设置为center时：

当align-items设置为base-line时： 在这里的效果等同于flex-start。

当align-items设置为stretch时： 因为我这里设置了item的宽度与高度，如果不设置item的高度的话，item的高度会被延伸到容器的边界。即铺满整个容器。

2.6 align-content

align-content只对多行的子元素起作用，对单行的无效。在使用的时候注意将flex-wrap的值设置成wrap。

取值：
flex-start：
各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行。

flex-end：
各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。

center：
各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）

space-between：
各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’flex-start’。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等。

space-around：
各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于’center’。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半。

stretch：
各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于’flex-start’。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。

设置为flex-start时：

与不设置align-content的值相比：

设置为flex-end时：

设置为center时：

设置为space-around时：

设置为space-around时：

设置为stretch时 ， 会将容器的交叉轴延伸铺满！

三、项目的属性下次再写