Flexbox创建弹性盒模型
Flexbox 简介
Flexbox是一种布局模型，旨在帮助web开发者创建使用其他布局方式难以实现的高级网站布局。
Flexbox（也称为弹性盒模型）为web开发者提供了对元素在容器中的定位、对齐和大小的控制。可以指定元素如何垂直/水平对齐、更改顺序、更改所有元素的布局方向等等诸如此类的操作。
在Flexbox之前，由于当时布局模型的局限性，常见的网站布局通常很难实现时下的需求。当时的布局模型并没有真正迎合现代网络上常见的复杂网络应用。块级布局模型是专为文档布局而设计，内联/行模型布局专为文本设计，表格布局模型用于展现2D数据，定位布局用于明确地定位元素位置，而不考虑文档中的其他元素。
由于这些布局模型的局限性，网站布局通常使用浮动，定位元素甚至与表格布局组合来实现网页布局。让web开发者头疼的是一个网站在不同屏幕尺寸下看就会很不正常。而让网站看起来正常的唯一方法是在CSS 和 HTML代码中加入hack来兼容 – 这不但违反我们的直观感觉的，更违背了Web开发人员所追求的“内容与样式分离”的开发方式。
Flexbox布局模型由CSS官方工作组开发，提供可以解决这些问题的盒模型。并在2016年5月26日成为W3C候选推荐标准，但其实在此之前就已经得到了浏览器的广泛支持。
创建弹性盒模型
创建一个具有弹性的容器并在容器中放三个弹性子级：
结构：
<!-- 1.1 -->
<div class="container">
<div class="red">1</div>
<div class="green">2</div>
<div class="blue">3</div>
</div>
样式：
/* 1.2 */
html,body{
margin: 0;
padding: 0;
}
.container{
display: flex;
}
.red{
background: orangered;
/* 伸缩量 */
flex-grow: 1;
}
.green{
background: yellowgreen;
}
.blue{
background: steelblue;
}
.container > div{
font-size: 5vw;
padding: .5em;
color: white;
}
这里使用display: flex声明最外层的元素container为弹性容器。这就是我们开始使用flexbox所需的装所有内容的容器。而所有Flex容器子元素都会自动变为弹性子级，并开始使用弹性布局模型进行布局。
但看到红色子级div比另外两个宽，这是因为我们使用了flex-grow: 1给这个红色子级div。
flex-grow属性用于设置弹性子级的扩展比率，这让设置了此属性的子级在任何有可用空间时都会扩展。另外两个子级div通过收缩直到只能容下各自内容为止。
填充内容
给blue子级div添加一些内容：
机构：
<div class="blue">3
<!-- 2.1 -->
<p>可以拉伸此div.blue的块级元素</p>
</div>
可以看到由于蓝色子级div内容太多，红色子级div收缩到只能容下自己的内容而且不再扩张。也就是说，通过向蓝色项目添加内容，有效地移除了可用空间，使红色子级div无法得到可用空间而收缩。并且蓝色子级div的高度也增加以适应新的内容。与此同时，其他两项也增加了他们的高度以与红色子级div匹配。
有了flexbox，所有这些都是默认设置的，这样我们就不必调整高度和宽度才能让我们的所有元素显示正常了。
调整宽度
上面我们并没有设置元素的宽度，如果我们设置了宽度又会怎么显示呢？
.blue{
background: steelblue;
/* 3.1 */
width: 40vw;
}
和预期的一样，蓝色子级div变得和指定宽度一样宽。但是由于设置宽度后会减少蓝色子级div的宽度，红色子级div会再次扩张 – 但依然只是占用可用空间。
这就是为什么它被称为弹性盒模型的原因。这些元素似乎很乐意适应周围发生的任何事情。😄
您大概可以想象，采取这一步会有多容易，并为网站布局创建一个基本模板。所以我们现在就这样做。
code enjoy! ◐‿◑
作者：indeex
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。