CSS3 弹性盒布局模型 实例教程

HTML5 herman 679浏览 0评论

接着上面一章的内容《CSS3 弹性盒布局模型简介》,我们接着讲 CSS3 的弹性盒布局模型。从最基本的布局开始介绍弹性盒布局模型。要实现的布局效果是一个简单的图片缩略图预览页面。

实例代码如下:

<style type="text/css">
	.flex-container {
	  list-style: none;

	   display: flex;
	   flex-direction: row;
	   flex-wrap: wrap;
	}
	.flex-item {
	   padding: 5px;
	}
</style>
<ul class="flex-container">
   <li class="flex-item"><img src="//placehold.it/300&text=1"></li>
   <li class="flex-item"><img src="//placehold.it/300&text=2"></li>
   <li class="flex-item"><img src="//placehold.it/300&text=3"></li>
   <li class="flex-item"><img src="//placehold.it/300&text=4"></li>
   <li class="flex-item"><img src="//placehold.it/300&text=5"></li>
   <li class="flex-item"><img src="//placehold.it/300&text=6"></li>
</ul>

对于弹性盒布局的容器,使用"display: flex"声明使用弹性盒布局。CSS 属性声明"flex-direction"用来确定主轴的方向,从而确定基本的条目排列方式。"flex-direction"属性的可选值及其含义如下

属性值 含义
row(默认值) 主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是 ltr,则排列顺序是从左到右;如果文档顺序是 rtl,则排列顺序是从右到左。
row-reverse 主轴为水平方向。排列顺序与页面的文档顺序相反。
column 主轴为垂直方向。排列顺序为从上到下。
column-reverse 主轴为垂直方向。排列顺序为从下到上。

默认情况下,弹性盒容器中的条目会尽量占满容器在主轴方向上的一行。当容器的主轴尺寸小于其所有条目总的主轴尺寸时,会出现条目之间互相重叠或超出容器范围的现象。CSS 属性"flex-wrap"用来声明当容器中条目的尺寸超过主轴尺寸时应采取的行为。"flex-wrap"属性的可选值及其含义如下:

属性值 含义
nowrap(默认值) 容器中的条目只占满容器在主轴方向上的一行,可能出现条目互相重叠或超出容器范围的现象
wrap 当容器中的条目超出容器在主轴方向上的一行时,会把条目排列到下一行。下一行的位置与交叉轴的方向一致。
wrap-reverse 与 wrap 的含义类似,不同的是下一行的位置与交叉轴的方向相反。

可以使用"flex-flow"属性把"flex-direction"和"flex-wrap"结合起来

flex-flow: row wrap;

容器中的条目

除了弹性盒布局模型中的容器之外,容器中的条目也可以通过 CSS 属性来改变其布局行为。下面介绍容器中的条目可以使用的 CSS 属性声明。

默认情况下,容器中条目的顺序取决于它们在 HTML 标记代码中的出现顺序。可以通过"order"属性来改变条目在容器中的出现顺序。

.flex-item:last-child {
   order: -1;
}

"order"属性的主要作用是兼顾页面的样式和可访问性。支持可访问性的设备,如屏幕阅读器,都是按照 HTML 中代码的顺序来读取元素的。这就要求一些相对重要的文本出现在 HTML 标记的前面。而对于使用浏览器的一般用户来说,在某些情况下把一些相对不重要的图片显示在前面是更好的选择。比如在一个商品的展示页面中,在源代码中把商品描述的文本放在商品图片之前。这样可以方便屏幕阅读器的读取;而在 CSS 中使用"order"属性把图片放在文本的前面。这样可以让用户首先看到图片。

条目尺寸的弹性

弹性盒布局模型的核心在于容器中条目的尺寸是弹性的。容器可以根据本身尺寸的大小来动态地调整条目的尺寸。当容器中有空白空间时,条目可以扩展尺寸以占据额外的空白空间;当容器中的空间不足时,条目可以缩小尺寸以防止超出容器范围。条目尺寸的弹性由 3 个 CSS 属性来确定,分别是"flex-basis"、"flex-grow"和"flex-shrink"。
"flex-basis"属性声明接受的值与"width"属性是一样的,用来确定弹性条目的初始主轴尺寸。这是条目的尺寸被容器调整之前的初始值。如果"flex-basis"的值为 auto,则实际使用的值是主轴尺寸属性的值,即 width 或 height 属性的值。如果主轴尺寸属性的值也是 auto,则使用的值由条目内容的尺寸来确定。
"flex-grow"属性的值是一个没有单位的非负数,默认值是 1。"flex-grow"属性的值表示的是当容器有多余的空间时,这些空间在不同条目之间的分配比例。比如,一个容器中有 3 个条目,其"flex-grow"属性的值分别为 1,2 和 3,那么当容器中有空白空间时,这 3 个条目所获得的额外空白空间分别占全部空间的 1/6、1/3 和 1/2。

.flex-item:nth-child(1) {
   flex-grow: 1;
}

.flex-item:nth-child(2) {
   flex-grow: 2;
}

.flex-item:nth-child(3) {
   flex-grow: 3;
}

"flex-shrink"属性在使用上类似于"flex-grow"。该属性的值也是无单位的,表示的是当容器的空间不足时,各个条目的尺寸缩小的比例。在进行尺寸缩小时,条目的缩小比例与"flex-basis"的值相乘之后,就得到了应该缩小的尺寸的实际值。例如,在容器中有 3 个条目,其"flex-shrink"属性的值分别为 1,2 和 3。每个条目的主轴尺寸均为 200px。当容器的主轴尺寸不足 600px 时,比如变成了 540px 之后, 则需要缩小的尺寸 60px 由 3 个条目按照比例来分配。3 个条目分别要缩小 10px、20px 和 30px,主轴尺寸分别变为 190px、180px 和 170px。

使用属性"flex"可以同时声明"flex-basis"、"flex-grow"和"flex-shrink"的值,格式是"none | [ ? || ]"。该属性的值的 3 个组成部分的初始值分别是"0 1 auto"。当属性"flex"的值为 none 时,相当于"0 0 auto"。当组成部分"flex-basis"被省略时,其值为 0%。

.flex-item:nth-child(1) {
   flex: 1 1 auto;
}

flex: 1;  // flex-grow 的值为 1,flex-shrink 的值为 1,flex-basis 的值为 0%。

需要注意的是,在容器分配额外空间时是以"行"为单位的。容器先根据"flex-wrap"的属性值来确定是单行布局或多行布局,然后把条目分配到对应的行中,最后在每一行内进行空白空间的分配。

.flex-container {
 width: 990px;
}

.flex-item {
 width: 300px;
 flex: auto;
}

由于容器的宽度只有 990px,所以在一行中只能排列 3 个条目,而剩下的 1 个条目则会被排列到单独的一行中。在 3 个条目的行中,多余的空间 90px 被平均分配给 3 个条目;而在一个条目单独的行中,多余的 690px 被该条目完全占据。

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加QQ1群:135430763(2000人群已满),QQ2群:454796847,QQ3群:187424846。QQ群进群密码:xttblog,想加微信群的朋友,可以微信搜索:xmtxtt,备注:“xttblog”,添加助理微信拉你进群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作可添加助理微信进行沟通!

本文原文出处:业余草: » CSS3 弹性盒布局模型 实例教程