CSS弹性flex

弹性盒

• 弹性盒、伸缩盒（flex）：  是CSS找那个的又一种布局手段，它主要用来代替浮动来完成页面的布局，flex可以使元素具有弹性，让元素可以跟随页面大小的改变而改变。
• 弹性容器：  要使用弹性盒，必须先将一个元素设置为弹性容器，我们可以通过display来设置弹性容器
• display: flex;设置为块级弹性容器；
• display: inline-flex;设置为行内弹性容器
• 块级与行内弹性容器的区别于块元素和行内元素的区别差不多，都是块会独占一行，而行内则不会
• 弹性元素：  弹性容器的子元素称为弹性元素（弹性项），弹性元素可以同时是弹性容器。
• 弹性元素：  弹性容器的子元素称为弹性元素（弹性项），弹性元素可以同时是弹性容器。
• 侧轴：  与主轴垂直的方向称为侧轴。
• flex-direction：  弹性盒的属性，指定弹性容器中弹性元素的排列方向，可选值如下：

1. row，默认值，弹性元素在容器中水平排列（从左向右），此时的主轴为：自左向右；
2. row-reverse，弹性元素在容器中水平排列（从右向左），此时的主轴为：自右向左；
3. column，弹性元素在容器中纵向排列（从上向下），此时的主轴为：自上向下；
4. column-reverse，弹性元素在容器中纵向排列（从下向上），此时的主轴为：自下向上。

• flex-grow：  弹性元素的属性，指定弹性元素的伸展系数，当父元素有多余的空间时，通过这个属性的设置，弹性元素会按照比例进行分配，可选值如下：

1. 0是默认值，即不增长；
2. 1指定增长系数为1，还可以指定2,3,4等，值越大，增长越多。

弹性容器

flex-wrap：  设置弹性元素是否在弹性容器中自动换行，可选值如下：

• nowrap，默认值，不会自动换行；
• wrap，弹性元素会沿着侧轴方向自动换行；
• wrap-reverse，弹性元素沿着侧轴反方向换行。 flex-flow：  是flex-direction与flex-wrap的简写属性，即可以同时设置这两个属性，如：

justify-content：  弹性元素如何分配主轴上的空白空间（主轴上的元素如何排列），可选值如下：

• flex-start，默认值，元素沿着主轴起边排列；
• flex-end，元素沿着主轴终边排列（即靠在终边）；
• center，元素居中排列；
• space-around，空白分布到元素的两侧（空白分布的不均匀）；
• space-between，空白均匀分布到元素间；
• space-evenly，空白均匀分布到元素的两侧。