网页设计学习笔记

HTML,CSS,JavaScript

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: :: 管理 ::

CSS3 中的弹性盒布局(Flexible Box Layout)标准已经进入候选推荐阶段,大部分浏览器也开始支持这个标准了,这里我们来介绍下这个标准。

在最新的 Chrome 中浏览下面的例子,可以看到父元素被横向分为三部分,而当鼠标移动到某一部分上面时,各部分的宽度会自动调整:

​<!DOCTYPE html>
<html><head>
<style>
.flex {
  width: 420px;
  height: 250px;
  border: 1px solid #555;
  display: -webkit-flex;
  -webkit-flex-direction: row;
}
.flex > div:nth-child(1) { 
  -webkit-flex: 1 1 auto;
  background : #009246;
}
.flex > div:nth-child(2) {
  -webkit-flex: 2 1 auto;
  background : #F1F2F1; 
}
.flex > div:nth-child(3) {
  -webkit-flex: 3 1 auto;
  background : #CE2B37; 
}
.flex > div {
  -webkit-transition: width 0.7s ease-out;
  width: 60px;
}
.flex > div:hover {
  width: 240px;
}
</style>
</head><body>
<div class="flex">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>
</body></html>

在上面的例子中首先我们设置了父元素的 display: flex; flex-direction: row; ,表示我们使用横向的弹性布局。display 也可以设为 inline-flex,这时候父元素就类似于 inline-block 的元素。

接下来我们对三个子元素分析设置了 flex 属性。flex 属性由三个值组成:flex-grow,flex-shrink 和 flex-basis。flex-grow 表示空间剩余时自动增加的份额,flex-shrink 表示空间不足时自动收缩的份额。而 flex-basis 表示初始大小。在调整空隙时,先计算父元素的大小以及各元素初始大小之和,得到两者的差,然后根据各个子元素的份额增加或者减少它们的大小。

flex-grow 和 flex-shrink 的默认值是 1;而 flex-basis 的初始值是 0;如果 flex-basic 设置为 auto,它的值就从该元素的 width 或 height 中取得。

根据上面的方法,在刚开始时,由于剩余的宽度为 420 - 60×3 = 240,而三个子元素的分配份额为 1:2:3,所以各分得 40,80 和 120。从而三者的实际宽度分别为 100px,140px 和 180px。类似地,我们可以计算出悬停状态下各部分的宽度变化,如下表:

  总共宽度 剩余宽度 左栏宽度 中栏宽度 右栏宽度
初始状态 420 240 60 + 40 = 100 60 + 80 = 140 60 + 120 = 180
左栏悬停 420 60 240 + 10 = 250 60 + 20 = 80 60 + 30 = 90
中栏悬停 420 60 60 + 10 = 70 240 + 20 = 260 60 + 30 = 90
右栏悬停 420 60 60 + 10 = 70 60 + 20 = 80 240 + 30 = 270

由于这个标准经过较大的改动,虽然主流浏览器都支持它,但是也许并不兼容。目前为止,支持最新标准的浏览器只有 Chrome 21+ 和 Firefox 22+,其中 Firefox 中无需特殊前缀。详情可见下面的参考资料。

参考资料:
[1] W3C - CSS Flexible Box Layout Module
[2] Using CSS flexible boxes - MDN
[3] Flexbox playground and code generator
[4] Can I use Flexible Box Layout Module?
[5] 跨浏览器弹性布局进阶教程 | 欧朋开发者社区
[6] 弹性方框模型 (Flexible Box Model) 快速入门
[7] CSS box-flex属性,然后弹性盒子模型简介
[8] CSS3 弹性盒模型与流式布局 - leecan_zeng - 博客园
[9] “Old” Flexbox and “New” Flexbox | CSS-Tricks

posted on 2013-06-04 11:00  zoho  阅读(314)  评论(0编辑  收藏  举报