准备工作
在开始学习flexbox之前，你需要以下基础知识：
- HTML基础
- CSS基础，并且知道CSS是如何工作的
为什么要学习使用flexbox(弹性盒子)?
在相当一段长的时间里，唯一具有浏览器兼容性的页面布局方法就是float(浮动) 和 position(绝对定位与相对定位) ，即便他们可以比较好的处理也页面布局，但在一些情况使用他们是十分困难的，如：
- 将一个元素相对于它的父元素垂直居中
- 将一个容器(container)中的所有子项(children)在容器当中具有相同的宽(width)和高(height)，无论容器(container)有多少宽高可用
- 使多列排列的元素的所有列具有相同的高度，即便他们具有具有不同的内容
哪些情况下我们使用flexbox?
一项新技术最大的问题是它的兼容性，下面的flexbox的兼容性列表,可以看到较新的浏览器都对flexbox提供了兼容。
因此，如果你的客户大都使用现代的浏览器，那么flexbox就一定适合你
注：即便现代浏览器都对flexbox提供了兼容，但某些语法在不同浏览器之间的兼容性还不如意，因此我们需要带前缀的flexbox语法来解决这些问题。
对元素使用flexbox进行布局的一个简单的例子
代码与原始页面如下
<title>flexbox</title>
<style >
body{
/* body默认有margin设置为0 */
margin: 0;
}
header{
background:#eee;
height: 100px;
}
h1{
/* h1默认有margin，这里我们设置成0 */
margin: 0 auto;
text-align: center;
line-height: 100px;
}
article{
margin: 10px;
background-color: lightblue;
}
</style>
</head>
<body>
<header>
<h1>
学习flexbox页面布局
</h1>
</header>
<section>
<article>
有一个小山村，很久很久都没有下雨了，老百姓吃完了粮食，吃草根，吃完了草根，吃树皮，到最后没有任何东西能填饱肚子，无数身边的人离开了，老人死去了，弱小的孩子死去了，村里的年青人不知如何是好。
</article>
<article>
做人，无需去羡慕别人，也无需去花时间去羡慕别人是如何成功的，想的只要是自己如何能战胜自己，如何变得比昨天的自己强大就行。自己的磨练和坚持，加上自己的智慧和勤劳，会成功的。终将变成石佛那样受到大家的尊敬。
</article>
<article>
生活星期天早上和朋友一起聊天，朋友说了一个他们听过的故事：“一尊佛像前有一条铺着石板的路，人们每天都踏着这一阶一阶的石板去膜拜佛像。石阶看着人们踏着自己去膜拜佛像，心里很不舒服。石阶心里想，自己和佛本来就来自同一块石头，为什么自己要成为踏脚石，让人们踩着自去去膜拜它呢！它对佛抱怨说这样太不公平！佛像说：这没有什么不公平，你们成为台阶只需挨了四刀，而我是挨了千刀万剐才成了人们膜拜的佛像
</article>
</section>将该页面中的三个<article>元素按列排序
使用float完成
如果使用float来进行处理，需要对每个<article>的float属性，与width属性进行设置，现在我们将article标签的CSS样式添加两条语句
article{
margin: 10px;
background-color: lightblue;
/*添加的语句，设置宽度和浮动*/
width:30%;
float:left;
}页面变为下图所示
使用flexbox完成
使用flexbox，想让<article>元素按列排序,只需要在<article>元素的父元素<section>的样式中添加一条语句即可：
section{
display: flex;
}页面效果如下
注：这里元素的排法是由flex-direction元素决定的，该元素默认值为 row,也就是排成一行。
这个简单的例子照应了开头我们所讲的内容
float和position做到“使多列排列的元素的所有列具有相同的高度，即便他们具有具有不同的内容”是困难的，而使用flexbox则可以很轻易的完成这项工作
