现在CSS浮动清楚定义了现在的网页布局，基于几个世纪以来的印刷理论，尽管他们运用起来很合适，严格来说，浮动并非是那个目的。就像表单布局一样，在90年代并没有阻止我们的前进。

然而，网页布局的未来确实是清晰明亮的，这要归功于弹性盒子。CSS布局机制是让我们安排元素在一个真正的网格空间。一些元素被固定，其他的可以滚动。他们的顺序可以独立于他们原来的顺序。所有的这些元素都可以适配一系列屏幕，从宽屏到智能手机，甚至是一些还没有想到的设备，浏览器支持也非常棒。所以这是一个很好的加入弹性盒子布局方式的时机，如果你还没有尝试过的话。

但是改变我们的方式并不是那么容易的。弹性盒子有着令人眼花缭乱的特性，这些特性很少有相似的，引入他需要花点时间。幸运的是，为了达到这个布局目的，你只需要了解很少的理论知识。让我们看下我们如何创建一个类似于Gmail的网站，基于弹性盒子布局原理的界面。假如你们有探索或者深入理解弹性盒子布局这种理论，这篇文章将会再次解释那些曾经困惑你的地方。

弹性盒子理念

弹性盒子理论需要一个全新的思考方式。代替从左到右，从上到下的行与列的排列布局，我们在一条线上安排元素——实际上，是两条线，一个主轴线和一个交叉轴线，但今天我们要用的是第一个主轴线。考虑到主轴线沿着盒子（div或者其他html元素）排列，这个类似于绳子的无形轴线，从容器的一端延伸到另一端。这引出四个很有趣的概念。

对齐

首先，我们可以沿着绳子分割这个盒子，使元素到一端，这样集中分布它们。那意味着元素可以紧邻屏幕的左边或者右边，无论屏幕有多宽。甚至这样分配可以满足任何尺寸的屏幕，这是最完美的在我们的多屏幕世界中。

弹性盒子允许设计师将HTML的元素推向绳子的任何一端

方向

其次，我们也可以翻转这个绳子，因此盒子向反方向翻转而不用去编辑HTML。这和排序技术很相似，允许我们翻转排列——除了第三个特征进一步来区分它们的不同。

元素的顺序和位置都可能被翻转

定位

第三，可以通过90度转动绳子从容器的顶部吊着，而不是从一边运行到另一边。

全部排列可以旋转90度，悬挂在容器的顶部

次序

最终，我们可以控制盒子的次序，沿着绳子哪一个排第一、第二、第三等等，而不用去编辑HTML。这是很厉害的，意味着我们可以控制HTML的文档结构。想让元素垂直居中排布？没有问题。想在你的HTML结束但在你开始布局时导航？当然可以。想尝试一下不同的布局？全部需要用到CSS理论。就像这样，我们已经开始考虑就文档内容和设备，而不是固化的栅格。

HTML元素的顺序可以通过CSS属性来改变，而不需要去改变HTML结构本身

有很多知识，但是这里只讲一些基础的理论：

1. 块级元素紧紧的沿着一条不可见线

2. 我们可以沿着那条线推动元素

3. 我们可以翻转绳子，这样就可以翻转盒子的顺序。

4. 我们可以沿着绳子按任何方式来改变盒子的顺序，而不用考虑改变HTML。

顺序

顺序是一个很重要的概念在弹性盒子理论中。让我们举一个简单的HTML文档:一个传统的博客一般包含这几点信息。

• 头部

网站的标题，描述，查询表单（这些框架告诉人们网站信息，已确保让他们知道自己在那里）

• 变换属性

作者，日期，主题（这些信息可以帮助人们了解这是否是他们所需要的）

• 主要内容

网页的主要内容是什么

• 提供服务的内容

一些相关的信息

• 导航

可以指引你到达网站的各个网页

• 尾部

版权信息，订阅信息，社交媒体，信息登记

为了可以被搜索引擎检索和用户浏览，这些元素被按顺序排列。现在，我们把这个绳子从移动设备的顶部悬挂下来，记录他们，并且把主要内容放在首位。

1. 主要内容

2. 变换属性

3. 补充内容

4. 头部

5. 导航

6. 尾部

然而，在电脑桌面端又有不同的浏览顺序

1. 头部

2. 变换属性

3. 主要内容

4. 补充内容

5. 导航

6. 尾部

等一下，那不是正确的顺序。我们希望导航在顶部，弹性盒子可以很轻松的做到这一点。这条绳子也可以放进弹性盒子内部，并且所有的规则同样适用。

嵌套绳子和盒子

每一个弹性盒子布局都可以在容纳另外的盒子按照他们各自的绳子排列，这条绳子可以从左到右排列反之亦然，也可以从上到下反之亦然，也可以把盒子推向另一边，居中来分布。因为弹性盒子的灵活性打开了各种可能性，他也意味着我们需要仔细的考虑我们的布局。

盒子沿着弹性绳子排列的时候，也可能包含着其他弹性盒子

我们从一些内容举例开始，看下它为何变得复杂了。这不是按照布局的顺序（你所看到的顺序）假想一下你给一个观众一个描述，你告诉他们你将说什么，然后你说了，然后你在总结下你刚说的内容。我们假设的页面也是按照相似的结构。

• 头部

• 当前信息

• 信息列表

• 盒子内部的一些链接

• 尾部

描述一个设计

为了使事情简单一些，我们会在一个相似的布局上开始工作。

一个典型的邮箱APP排版布局

这里有两个弹性盒子布局，第一个有三个盒子从上到下。第二个布局是在中间的盒子，从右到做排列。

头部、尾部的宽度和视口宽度一样。导航栏适配在左边，当主要内容信息不能被完全容纳后，区域允许出现滚动条。为了达到这个目的，需要设置一些浮动和绝对定位，但是弹性盒子给了我们更多的选择，接下来我们一起看下。

设置文档

外部的容器只有三个部分，包裹在一个弹性容器元素内：

我们用语义表达方式把它称之为弹性盒子，至少我们的CSS会更通顺。

在盒子内部，我们需要三个层级块：

这个例子用这个段落作为一个独立的整体，而不是文章中的段落。

声明这些元素为弹性盒子

我们需要告诉浏览器这些元素是弹性布局，可以伸缩的。

注意到这个可以使弹性盒子应用在主要的容器上，而不是内容本身。

增加一些维度

根据原型设计图，我们了解到确定的元素需要有自身的长度和宽度。网站的头部和尾部相对于主题内容来说要短一点，相对于左边很窄的导航工具栏。文章的内容区域占据了剩下的空间区域。为了保持灵活的布局而不考虑屏幕尺寸（这篇教程所声明的），这些区域不会设置固定的宽度。

这里，我们将 flex-basis比喻为宽度，只要主轴是水平的，如果我们将绳子从上到下挂起来，那么 flex-basis 将自动变为高度！

使主要部分可滑动

这个是很容易的。只需要设置添加 overflow:scroll。对于主要的元素避免他被头部和尾部所覆盖。小提示：尝试overflow:auto 隐藏滚动条（当他们不是必须的时候）在大多数浏览器中。

测试内容

在这一点上，头部的表单浮动，需要设置一点边距，即使当浏览器被重置。主要部分应当很完美的浮动不管在任何尺寸的浏览器中。假如浏览器不能友好的支持弹性盒子，那么这个页面将变为主要内容优先的布局方式。

知道哪些浏览器不支持弹性盒子是很重要的。每个最新的版本基本上都支持，但是，有个问题是用户何时更新他们的软件。那么哪些版本开始这些浏览器支持弹性盒子呢？

• 谷歌31以及以后

• 火狐31以及以后

• IE浏览器10及以后

• 电脑版Safari 7及以后

• iOS版 7.1及以后

• 安卓4.4及以后

• 谷歌安卓版42及以后

• 欧朋27及以后

那么老的浏览器怎么办呢？解决方案大相径庭，取决于你正在努力达到的布局,尽管我们可以推出一些技巧。

最安全的方式让弹性盒子完美的支持浏览器，是按照顺序把CSS写在他将出现的地方。按照语义化的思考方式开始，老版本浏览器将忽视弹性盒子的属性信息，感谢的是，好的条件注释将允许我们应用浮动和清除布局。老版本的浏览器往往可以给你更清晰的逻辑顺序，因此弹性盒子和浮动将并存。智能的浏览器将会应用弹性盒子布局，尽管逻辑上浏览器应当忽视它们。最后，假如你想试验下，那么尝试Flexie,一个基于JavaScript的polyfill的老版本浏览器工具。

本文来自广州品牌网站建设网站设计制作公司-纵天科技 

标签：纵天,高端网站建设,企业建网站,广州响应式网站

关注我们：在查找公众号中搜索：zomsky1688，或者扫描下方二维码快速关注。