flexbox 溢出_Flexbox

Flexbox

Flexbox，全称弹性盒子布局(Flexible Box Layout)，是一种新的布局方式。跟浮动布局相比，Flexbox的可预测性更好，还能提供更精细的控制。

它也能轻松解决困扰我们许久的垂直居中和等高列问题。

Flexbox的原则

一切要从我们熟悉的 display 属性开始。给元素添加 display: flex，该元素变成了一个弹性容器(flex container)，它的直接子元素变成了弹性子元素(flex item)。

弹性子元素默认是在同一行按照从左到右的顺序并排排列。

弹性容器像块元素一样填满可用宽度，但是弹性子元素不一定填满其弹性容器的宽度。

弹性子元素高度相等，该高度由它们的内容决定。

提示：还可以用 display: inline-flex。它创建了一个弹性容器，行为类似于inline-block元素。它会跟其他行内元素一起流式排列，但不会自动增长到100%的宽度。

内部的弹性子元素跟使用display:flex创建的Flexbox里的弹性子元素行为一样。在实际开发时，很少用到display: inline-flex。

之前提到的display 值，比如inline、inline-block 等，只会影响到应用了该样式的元素，而Flexbox则不一样。一个弹性容器能控制内部元素的布局。

子元素按照主轴线排列，主轴的方向为主起点(左)到主终点(右)。垂直于主轴的是副轴。方向从副起点(上)到副终点下)。

说明：因为Flexbox布局是以主轴和副轴为基础来定义的，所以会使用起点和终点来描述轴，而不是左和右，或者上和下。

               

在flexbox 的子元素中允许使用 margin:auto属性，这时候 弹性盒子内的auto 外边距会填充所有可用空间。

flex 属性控制弹性子元素在主轴方向上的大小(在这里指的元素的宽度)。

flex-basis属性

flex-basis定义了元素大小的基准值，即一个初始的“主尺寸”。

flex-basis属性可以设置为任意的width值，包括px、em、百分比。

它的初始值是auto，此时浏览器会检查元素是否设置了width属性值。如果有，则使用width 的值作为flex-basis的值；如果没有，则用元素内容自身的大小。

如果flex-basis的值不是auto, width属性会被忽略。

flex-grow属性

每个弹性子元素的flex-basis值计算出来后，它们(加上子元素之间的外边距)加起来会占据一定的宽度。

加起来的宽度不一定正好填满弹性容器的宽度，可能会有留白。多出来的留白(或剩余宽度)会按照flex-grow(增长因子)的值分配给每个弹性子元素， flex-grow的值为非负整数。

如果一个弹性子元素的flex-grow 值为0，那么它的宽度不会超过flex-basis的值；如果某个弹性子元素的增长因子非0，那么这些元素会增长到所有的剩余空间被分配完，也就意味着弹性子元素会填满容器的宽度。

flex-shrink 属性

每个子元素的 flex-shrink 值代表了它是否应该收缩以防止溢出。

如果某个子元素为flex-shrink: 0，则不会收缩；如果值大于0，则会收缩至不再溢出。

按照 flex-shrink值的比例，值越大的元素收缩得越多。

提示：推荐使用简写属性 flex，而不是分别声明 flex-grow、flex-shrink、flex-basis。与大部分简写属性不一样，如果在flex 中忽略某个子属性，那么子属性的值并不会被置为初始值。相反，如果某个子属性被省略，那么flex简写属性会给出有用的默认值：flex-grow为1、flex-shrink为1、flex-basis为0%。这些默认值正是大多数情况下所需要的值。

flex-wrap 属性

flex-wrap 属性允许弹性子元素换到新的一行或多行显示。它可以设置为 nowrap(初始值)、wrap或者wrap-reverse。启用换行后，子元素不再根据flex-shrink值收缩，任何超过弹性容器的子元素都会换行显示。

如果弹性方向是column或column-reverse，那么flex-wrap会允许弹性子元素换到新的一列显示，不过这只在限制了容器高度的情况下才会发生，否则容器会扩展高度以包含全部弹性子元素。

flex-flow属性

flex-flow属性是flex-direction和flex-wrap的简写。例如，flex-grow: column wrap指定弹性子元素按照从上到下的方式排列，必要时换到新的一列。

justify-content属性

当子元素未填满容器时，justify-content属性控制子元素沿主轴方向的间距。

 它的值包括几个关键字：flex-start、flex-end、center、space-between 以及 space-around。默认值 flex-start 让子元素从主轴的开始位置顺序排列，比如主轴方向为从左到右的话，开始位置就是左边。如果不设置外边距，那么子元素之间不会产生间距。如果值为flex-end，子元素就从主轴的结束位置开始排列，center的话则让子元素居中。

值space-between将第一个弹性子元素放在主轴开始的地方，最后一个子元素放在主轴结束的地方，剩下的子元素间隔均匀地放在这两者之间的区域。

值 space-around 类似，只不过给第一个子元素的前面和最后一个子元素的后面也加上了相同的间距。间距是在元素的外边距之后进行计算的，而且flex-grow的值要考虑进来。

也就是说，如果任意子元素的 flex-grow 的值不为0，或者任意子元素在主轴方向的外边距值为 auto, justify-content就失效了。

align-items属性

justify-content 控制子元素在主轴方向的对齐方式，align-items 则控制子元素在副轴方向的对齐方式。

align-items的初始值为stretch，在水平排列的情况下让所有子元素填充容器的高度，在垂直排列的情况下让子元素填充容器的宽度，因此它能实现等高列。

其他的值让弹性子元素可以保留自身的大小，而不是填充容器的大小。(类似的概念有vertical-align属性。)

❑ flex-start和flex-end让子元素与副轴的开始或结束位置对齐。

 (如果是水平布局的话，则与容器的顶部或者底部分别对齐。)

❑ center让元素居中。

❑ baseline让元素根据每个弹性子元素的第一行文字的基线对齐。

    当你想要一个弹性子元素里大字号标题的基线与其他弹性子元素里较小文字的基线对齐时，baseline就能派上用场。

提示：justify-content和align-items属性的名称很容易弄混。

参考文字样式来记的：我们可以“调整”(justify)文字，让其在水平方向的两端之间均匀分布；而align-items更像vertical-align，让行内元素在垂直方向“对齐”(align)。

align-content属性

如果开启了换行(用flex-wrap), align-content 属性就可以控制弹性容器内沿副轴方向每行之间的间距。

它支持的值有 flex-start、flex-end、center、stretch(初始值)、space-between以及space-around。

这些值对间距的处理类似上面的justify-content。