彻底理解CSS3弹性盒模型flex 用法

一、flex是什么？它有什么作用？

flex全称flexible box，中文名叫“弹性布局”。用来为盒模型提供最大的灵活性。任何容器都可以使用它

display: flex;

也包括行内元素可以使用它

display: inline-flex;

记得添加浏览器厂商前缀

display:-webkit-flex;
display:-webkit-inline-flex;

切记：一旦使用flex，子元素的float、clear、vertical-align属性都将失效

二、关于flex(弹性布局)的基本属性

在容器上可以设置的六个属性：

flex-direction: row | row-reverse | column | column-reverse
/*    规定子元素排列方向
 * row：横向从左到右排序
 * row-reverse：横向从右到左排序
 * column：纵向从上到下排序
 * column-reverse：纵向从下到上排序
 */

示例：

           

flex-wrap: nowrap | wrap | wrap-reverse
/*   控制容器是否为单行或多行
 * nowrap: 不换行
 * wrap: 换行，第一行在上方
 * wrap: 换行，第一行在下方
 */

示例：

         

flex-flow: flex-direction || flex-wrap
/*
 * flex-flow是上面两个元素的简写，默认值 row nowrap
 */

justify-content:flex-start | flex-end | center | space-between | space-around | space-evenly
/*  规定子元素在主轴（x轴）上的对齐方式
 * flex-start: 左对齐
 * flex-end: 右对齐
 * center: 居中
 * space-between: 两端对齐，子元素之间的间隔相等
 * space-around: 子元素与子元素的间隔相等，并且两端子元素保留与子元素的间隔的一半的距离
 * space-evenly: 间隔相等
 */

示例：

align-items: flex-start | flex-end | center |  baseline | stretch
/* 子元素的侧轴（y轴 or 交叉轴）的对齐方式
 * flex-start: y轴起始边界
 * flex-end: y轴终止边界
 * center：y轴的居中位置
 * baseline: 与第一行文字对齐
 * stretch: 如果没设置高度或为auto，就占满整个容器的高度
 */

示例：

align-content: flex-start | flex-end | center| space-between | space-round | stretch
/* 定义 行 的对齐方式，只有一行不起作用
 * flex-start: y轴起点
 * flex-end: y轴终点
 * center: y轴中点
 * space-between: 与y轴两端对齐，行与行之间平均分布
 * space-around: 与y轴的间隔，是行与行之间间隔的一半
 * stretch： 平均分布，类似于align-items:stretch
 */

示例：

在容器的子元素可以设置6个属性：

align-self: auto | flex-start | flex-end | center | baseline | stretch
/* 覆盖父元素的align-items的值，可以定义自身在y轴上的对齐方式。
 * auto: 其值为父元素的align-items的值，若没有父元素，则值为stretch
 * flex-start: y轴起始边界
 * flex-end: y轴终止边界
 * center：y轴的居中位置
 * baseline: 与第一行文字对齐
 * stretch: 如果没设置高度或为auto，就占满整个容器的高度
 */

由于跟align-items几乎一样，在这里就不多做演示了

order: number
/*
 * 设置或检索弹性盒模型对象的子元素出現的順序
 * 数值越小，排列越靠前，默认为0
 * 可以为负值
 */

示例：

接下来，重头戏

flex-grow: number
/* 自身元素的放大比例
 * 当为0，则不放大
 * 当为1，等分剩余空间
 */

flex-shrink: number
/* 自身元素的缩小比例
 * 值为0，空间不足时，不缩小
 * 值为1，空间不足是，等比例缩小
 */

flex-basis: number | auto | content
/* 设置或检索弹性盒伸缩基准值
 * 如果所有子元素的基准值之和大于剩余空间，则会根据每项设置的基准值，按比率伸缩剩余空间
 * 否则，将会占据固定的空间。如150px  或 10% 
 */

flex: flex-grow || flex-shrink || flex-basis
/*
 * 简写形式
 */

重点讲讲最后几个属性。

在平时练习当中，往往会遇到如何设置三个元素才能恰当完成页面布局？

为此，我搜索了很多大神写的答案。总结一下：

1. 从 flex-grow 开始：

    该属性是设置子元素如何分配父元素的剩余空间。

假设父元素为500px ， 子元素A、B分别为100px、200px; 则剩余空间为 200px。

如果 flex-grow 的值为 0 （默认值），则不索取父元素的剩余空间，即A还是100px，B还是200px；

如果 flex-grow 的值为1，则A和B平均分配剩余空间，即A=(100+100)px=200px，B=(200+100)px=300px；

如果flex-grow的值大于1，例如A=2、B=3，则A=(100+200*(2/2+3))=180px，B=(200+200*(3/2+3))=320px

解释下：

       200*（2/2+3）是A获得父元素分配剩余空间的宽度

       200*（3/2+3）是B获得父元素分配剩余空间的宽度

2. flex-shrink :

    该属性是设置子元素在父元素空间不足的情况下，如何缩小自身的宽度

假设父元素为300px ， 子元素A、B分别为200px、200px; 则多出空间为 100px。

如果 flex-shrink 的值为 0， 则不会缩小自身宽度，就会溢出父元素

如果 flex-shrink 的值为 1， 子元素均等减少自身宽度，则A=(200-100*(200*1/(200*1+200*1)))=150px，B同样也是150px

解释下：

100*(200*1/(200*1+200*1))是A减少宽度，同样 B也是一样

假设父元素宽度为400px，A的宽度为200px，且flex-shrink的值为2；B的宽度为300px，且flex-shrink的值为4，那么A、B的宽度分别减少多少呢？

多出的宽度： 100px

那么A减少的宽度=100*(200*2/(200*2+300*4))=25px;

       B减少的宽度=100*(300*4/(200*2+300*4))=75px;

所以，此时A的宽度应为 175px； B的宽度应为 225px；

减少宽度的公式：多出的宽度*（子元素的宽度*shrink值/(各子元素的宽度*各自的shrink值 之和)）

3. flex-basis：

    用来设置元素的宽度，它会覆盖width的值。它规定子元素的基准值，且规定的范围取决于box-sizing。有几个特殊的值：

（1）0%。子元素没有宽度

  (2) content。根据子元素的内容自动布局

（3）auto。首先检索该子元素的主尺寸，如果主尺寸不为 auto，则使用值采取主尺寸之值；如果也是 auto，则使用值为 content。

4. flex 几种特殊取值情况

（1）flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto。同理，如下是等同的：

.item {flex: 2333 3222 234px;}
.item {
    flex-grow: 2333;
    flex-shrink: 3222;
    flex-basis: 234px;
}

（2）当 flex 取值为 none，则计算值为 0 0 auto，如下是等同的：

.item {flex: none;}
.item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

（3）当 flex 取值为 auto，则计算值为 1 1 auto，如下是等同的：

.item {flex: auto;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

（4）当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：

.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

（5）当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）：

.item-1 {flex: 0%;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 24px;
}

（6）当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：

.item {flex: 2 3;}
.item {
    flex-grow: 2;
    flex-shrink: 3;
    flex-basis: 0%;
}

（7）当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

.item {flex: 2333 3222px;}
.item {
    flex-grow: 2333;
    flex-shrink: 1;
    flex-basis: 3222px;
}