Flexbox(中文版本可以点击这里)的布局是一个用于页面布局的全新CSS3模块功能。它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间。较为复杂的布局可以通过嵌套一个伸缩容器(flex container)来辅助实现。

Flexbox可以简单快速的创建一个具有弹性功能的布局,当在一个小屏幕上显示的时候,Flexbox可以让元素在容器(伸缩容器)中进行自由扩展和收缩,从而容易调整整个布局。它的目的是使用常见的布局模式,比如说三列布局,可以非常简单的实现。

 

看看一些例子来了解Flexbox擅长哪种东西。

伸缩容器(flex containers)和伸缩项目(flex items)

一个Flexbox布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。

伸缩容器(flex containers)是一个HTML标签元素,并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目(flex items)。

这有一个三列布局的例子。外面的div容器是一个伸缩容器,而里面的left、main和right三个div都是伸缩项目:

设置一个简单的伸缩容器很容易,代码如下:

<div class="container"></div>    

.container {
display: flex;
}

伸缩方向与换行(flex-flow)

伸缩容器有一个CSS属性“flex-flow”用来决定伸缩项目的布局方式。如果伸缩容器设置了“flex-flow”值为“row”,伸缩项目排列由左向右排列:

如果“flex-flow”值设置为“column”,伸缩项目排列由上至下排列:

这里将展处样设置伸缩容器,使用伸缩项目在一行中显示:

.container {
display: flex;
flex-flow: row;
}

一个伸缩容器中的所有伸缩项目既可以排列在单行也可以多行排列。这个主要由“flex-flow”是否设置为“wrap”来决定。如果伸缩容器设置了“wrap”属性值,当伸缩项目在伸缩容器中无法在一行中显示的时候会另起一行排列。

这里展示了如何将伸缩容器设置为“wrap”:

.container {
display: flex;
flex-flow: row wrap;
}

伸缩项目(flex items)

在伸缩容器中的所有子元素都将自动变成伸缩项目。没有额外配置CSS的必要。你唯一需要的做的就是设置伸缩项目的尺寸。

如果伸缩容器把“flex-flow”设置为“row”后,伸缩项目将需要设置他们的宽度。伸缩项目的高度将会自动设置为伸缩容器的高度:

如果伸缩容器把“flex-flow”设置为“column”后,伸缩项目将需要设置他们的高度,伸缩项目的宽度将会自动设置为伸缩容器的宽度:

给伸缩项目设置“width”和“height”属性来定义伸缩项目尺寸,而这个伸缩项目是独立于其他伸缩项目。例如,如果我们给主内容(content)设置了一个600px的宽度,不管伸缩容器中有一个、两个或者上百个伸缩项目,主内容的宽度都是600px。

如果你想伸缩项目根据伸缩容器剩余的空间来决定伸缩项目的宽度,你可以使用“flex”属性。例如,我们可以告诉浏览器,左边栏和右边栏占用了伸缩容器减去主内容宽度的空间。

flex的值于对应的空间成正比。如果左边栏设置了值为“1”和右边栏设置了值为“2”,伸缩容器剩余的空间将按比例分配给左边栏和右边栏,并且右边栏所占的空间是左边栏的两倍:

下面是示例中运用在伸缩项目上的一些代码,展示了独立宽度和按比例计算的宽度:

.main {
width: 600px;
}
.left {
flex: 1;
}
.right {
flex: 2;
}

完整的实例

这是一个很简单的实例,Flexbox创建了一个经典的三列布局。主内容宽度为60%,而边栏是使用“flex”属性,按比例自动根据伸缩容器剩余空间计算得到对应的宽度:

HTML结构

<div class="container">
<nav class="nav left">…</nav> <section class="main">

</section> <nav class="nav right">…</nav>
</div>

CSS代码

.container {
display: flex;
flex-flow: row;
}
.main {
width: 60%;
}
.left {
flex: 1;
}
.right {
flex: 2;
}

示例效果

在线演示案例

浏览器支持

在2012年写作时,浏览器支持定案(最新版本)语法并不是很好。这个例子可以在Opera和webkit内容的Chrome下运行很好(webkit下需要添加前缀-webkit)。

在我的文章示例代码中没有写上浏览器的前缀,主要是让大家更好的理解。在2013年03月前为了更广泛的支持浏览器,你需要添加webkit内核和ie浏览器的前缀。你也可能需要考虑添加支持flexbox的老语法版本。我个人认为可以先学习flexbox的使用,在实际项目中推迟使用,直到最终的语法得到更多浏览器的支持。

原文链接:http://www.w3cplus.com/css3/css3-flexbox-layout.html

《转载》使用CSS3 Flexbox布局的更多相关文章

  1. 转:CSS3 Flexbox 布局介绍

    转:CSS3 Flexbox 布局介绍 Flexbox是一个用于页面布局的全新CSS3模块功能.它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间.较为复杂的布 ...

  2. CSS3 Flexbox布局那些事

    相信研究过CSS3的同学对Flexbox布局一定不会陌生(作为一个未来主流的布局方式,至少有所耳闻).最近完成了两个项目:一个是移动端H5项目,一个是嵌入HTML页面的mac客户端项目.为了庆祝这两个 ...

  3. CSS3 flexbox 布局 ---- flex 容器属性介绍

    flexbox布局是CSS3中新增的属性,它可以很轻松地帮我们解决掉一些常见的布局问题,比如导航栏. 我们用普通的方法写导航栏,通常会在ul, li 结构写好后,让li 元素左浮动,然后再给ul 清浮 ...

  4. 使用CSS3 Flexbox布局

    Flexbox(中文版本可以点击这里)的布局是一个用于页面布局的全新CSS3模块功能.它可以把列表放在同一个方向(从左到右或从上到下排列),并且让这些列表能延伸到占用可用的空间.较为复杂的布局可以通过 ...

  5. CSS3 flexbox 布局 ---- flex项目属性介绍

    现在介绍用在flex项目上的css 属性,html结构还是用ul, li 结构,不过内容改成1,2,3, 样式的话,直接把给 ul 设display:flex 变成flex 容器,默认主轴的方向为水平 ...

  6. css3 flex布局/grid布局

    1.CSS3 Flexbox 布局完全指南(图解 Flexbox 布局详细教程) 2.CSS Grid 布局完全指南(图解 Grid 详细教程)

  7. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  8. CSS3之Flexbox布局

    CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局,它具有很强大的功能,可以很轻松实现很多复杂布局,在它出现之前,我们经常使用的布局方式是浮动或者固定宽度+百分比来进行布局, ...

  9. 三分钟学会CSS3中的FLEXBOX布局

    原文地址,保护版权,请勿转载:http://page.factj.com/blog/p/2574 这篇文章里我们将学习CSS里flexbox布局的几个最重要的概念,通过学习flexbox布局,你会发现 ...

随机推荐

  1. hdu 5506 GT and set(dfs爆搜)

    Problem Description You are given N sets.The i−th set has Ai numbers.You should divide the sets into ...

  2. 高性能浏览器网络(High Performance Browser Networking) 第二章

    第2章 TCP篇 互联网的核心是两个协议,IP和TCP. IP也叫Internet协议,提供主机到主机的路由和寻址:TCP,传输控制协议,在不可靠的传输通道上提供一个可靠的网络抽象.TCP / IP协 ...

  3. git 在苹果系统中的一些命令

    下面是在mac下使用git的一些命令的使用,如果想参看原文使用xcode来处理git,可以进入下面的链接,不过是英文的. 使用终端命令终端: cd /Users/Malek/desktop/GitUs ...

  4. Sequence one(hdu2610dfs+去重)

    题目:有一个数列N,和一个数字k,输出该数列的前k个子序列,如果k大于N的所有子序列,输出所有符合要求的序列,序列要求不能是递减序列 比如: 3 5 1 3 2 的前五个序列为 1 3 2 1 3 1 ...

  5. 如何实现在O(n)时间内排序,并且空间复杂度为O(1)

    对于常见的排序算法,很难做到在O(n)时间内排序,并且空间复杂度为O(1),这里提供了一种方法可以达到要求. 可以使用哈希排序的思想,也就是将所有的数哈希到哈希表中,实现排序.具体的算法思想是,求出这 ...

  6. Tomcat无法安装 Check your settings and permissions Ignore and continue anyway

    刚刚“sj”,把装在C盘的tomcat的文件夹给删除了,刚删完就想到干嘛不卸载啊,哎惯性思维啊,转而一想,tomcat这么简单安装,不怕不怕,后来一装,妈啊,装不了,百度之后原来是服务没有删除,好吧, ...

  7. Backup Exec Inventory 与Catalog的含义(转载)

    编录:即catalog,就是让磁带机读取磁带之前所备份过的内容的目录列表,可以让你知道之前做过什么备份,以及备份时间等详细信息. 列清单:inventory,跟编录是不同,inventory是查询磁带 ...

  8. JavaScript Dispatch Event

    <html> <head> <script type="text/javascript"> function performClick(elem ...

  9. [Linked List]Sort List

    otal Accepted: 59473 Total Submissions: 253637 Difficulty: Medium Sort a linked list in O(n log n) t ...

  10. Python之路第五天,基础(5)-序列化和字符串格式化

    序列化 Python中用于序列化的两个模块 json 用于『字符串』和『python基本数据类型』间进行转换 pickle 用于『python特有的类型』和『python基本数据类型』间进行转换 js ...