flex 会使div撑满_如何讲清楚Flex弹性盒模型？(中)

上一篇我们讲解了, flex容器的属性, 如何定义主轴方向, 以及主轴侧轴对齐方式

这篇讲解子元素的一些属性.

如何对子项目进行排序?

弹性盒模型第一次可以让我们方便的对元素进行排序

使用 order属性, 它的默认值是0

元素按照order顺序排列

如何定义子项目大小?

flex布局提供另外一个属性 flex-basis

它用来设定元素在主轴方向的大小

注意主轴可以是row方向, 也可以column方向

另外, 某个子元素, 可以单独设置跟其它子元素不一致的(侧轴)对齐方式.

最后, 要隆重的介绍flex-grow这个属性了

它叫做『剩余空间瓜分比例』

从图上可以看出, AB没有撑满flex容器, 如果希望AB调整大小撑满容器的话

我们需要加上flex-grow这个属性

.container {
    display: flex;
    width: 500px;
    ....
}
div:nth-child(1) {
    width: 100px;
    background-color: pink;
    flex-grow: 1;
}
div:nth-child(2) {
    width: 100px;
    background-color: lightseagreen;
    flex-grow: 1;
}

那么AB元素会按照1:1的比例把父元素剩余的空间瓜分掉, 效果如图

当然, 如果你希望B保持不变, 只有A变大的话, 你可以这样写

div:nth-child(1) {
    background-color: pink;
    flex-grow: 1;
}
div:nth-child(2) {
    background-color: lightseagreen;
    flex-grow: 0;  /*默认值就是0, 其实不用写*/
}

我们也可以调整比例

div:nth-child(1) {
    width:100px;
    background-color: pink;
    flex-grow: 2;
}
div:nth-child(2) {
    width:100px;
    background-color: lightseagreen;
    flex-grow: 1; 
}

AB按照2:1的比例瓜分了剩余空间

既然可以放大, 元素也能缩小

接下来介绍flex-shrink属性, 它叫做多余空间削减比例

当元素大小超出了flex父容器, 子元素可以按比例缩减.

但是这里的算法比刚才的flex-grow复杂了一些

我们先看一种简单的情况

.container{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	box-shadow: 0 0 0 1px black;
	height: 100px; width: 400px; /*父元素宽度为400*/
} 
div:nth-child(1) {
	width: 300px;  /*子元素A宽度为300*/
	background-color: pink;
	flex-shrink: 1; /*多余空间削减比例为1, 默认值为1, 可以不写*/
}
div:nth-child(2) {
	width: 200px;  /*子元素B宽度为200*/
	background-color: lightseagreen;
	flex-shrink: 1; /*多余空间削减比例为1, 默认值为1, 可以不写*/
}

削减比例我们设置了1:1 , 那么实际结果呢?

从图中的实际效果来看,

A元素削减了60个像素

B元素削减了40个像素

这并不是1:1啊, 这是3:2啊

这个3:2又是怎么来的呢?

其实, 它就是AB元素的原始比例大小

所以, 在削减比例上, 元素还会受到原始大小比例的影响 总结一个公式如下: 子元素的削减比例===原始大小比例 X flex-shrink比例

那么, 根据我们所得的公式, 如果我们想让上面的例子当中

AB元素都削减一样的大小该如何做呢?

答案就是:

div:nth-child(1) {
	width: 300px;
	background-color: pink;
	flex-shrink: 2;
}
div:nth-child(2) {
	width: 200px;
	background-color: lightseagreen;
	flex-shrink: 3;
}

最终效果:

---

让我们来总结一下

项目的属性（添加在子元素身上的属性）

• Order属性

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

.item {
   order: <integer>;
}

• flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。

.item {
    flex-basis: <length> | auto; /* default auto */
}

• align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {
     align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

• flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
   flex-grow: <number>; /* default 0 */
}

• flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
    flex-shrink: <number>; /* default 1 */
}

---

本文摘自 知乎号：千锋HTML5学院

原文链接：如何讲清楚Flex弹性盒模型(中)？

Eric：如何讲清楚Flex弹性盒模型？(上)​zhuanlan.zhihu.com

Eric：详解JavaScript严格模式​zhuanlan.zhihu.com

Eric：vue 过滤器​zhuanlan.zhihu.com