深入浅析CSS3中的Flex布局整理(2)

在上面所有的例子中，三个flex item只占据了flex container小部分空间，如果想让flex item占满flex container我们需要给flex item设置flex-grow属性。顾名思义，grow意味着增长，用于控制flex item的尺寸的伸展。

css:

.one { flex-grow: 2; } .two { flex-grow: 8; } .three { flex-grow: 2; }

效果：

划重点

flex-grow如果是负数则无效

每个item划分多余的空间并不是按flex-grow的比例来划分，是每个item自身的width * 自身的flex-grow的结果的比例来划分！亲测！！！

3. flex-shrink

与flex-grow相对的是flex-shrink， flex-shrink用于控制子元素尺寸超过flex container后，对子元素的压缩。 划重点：

flex-shrink如果是负数则无效 4. flex-basis

这定义了在分配剩余空间之前元素的默认大小。

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

auto 关键字的意思是“查看自身的width 或 height 属性”。

5. flex

这是 flex-grow、 flex-shrink 和 flex-basis 组合的简称。 第二个和第三个参数(伸缩和伸缩基础)是可选的。建议使用此简写属性，而不是设置单个属性。

.flex-item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

6. align-self

这允许重写单个 flex 项的默认对齐方式(或 align-items 指定的对齐方式)。

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

css:

.flex-container { display: flex; align-items: center; } .one { align-self: flex-end; }

效果：

到此这篇关于深入浅析CSS3中的Flex布局整理的文章就介绍到这了,更多相关css flex 布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

（编辑：ASP站长网）