Flexbox是一个全新且非常有用的CSS布局模式，它和以前的网页布局的做法完全不同。这篇文章将介绍如何使用CSS3 Flexbox来制作各种不同的页面布局。
flexbox具有三个特性，这是基本的设计。但是在CSS中，它可以有不同的布局实现：对齐、分布和排列顺序。
在开始介绍Flexbox布局之前，要注意以下一些问题：
- Flexbox在目前的版本之前经过了三次大的调整。之前的每一个版本为各个浏览器都使用带浏览器厂商前缀的不同属性名称。现在我们可以使用不带浏览器厂商前缀的Flexbox属性，因为所有的最新版的现代浏览器都支持这个属性。作为一个建议，最好使用最新版的现代浏览器来测试当前版本的Flexbox属性，通过后再在旧版本的浏览器上进行测试。
- Flexbox能够完成的布局使用其它CSS布局方式同样能够完成，我们为什么要使用Flexbox布局方式呢？的确，CSS可以完成所有你想要的页面布局，但是使用哪一种方法是最好的，最符合你的需求的。Flexbox能够解决目前绝大多数的页面布局问题。
Flexbox的基本例子
现在开始来介绍Flexbox的基本布局。使用一个<div>作为包裹容器，然后在它里面放入三个<div>。
<div id="item-container">
<div class="circle"></div>
<div class="square"></div>
<div class="circle"></div>
</div>
现在将内部的div设置为它们class描述的样子：圆形或方形。并且在外部的容器div上设置display: flex：
#item-container {
display: flex;
background-color: hsl(34,88%,90%);
}
.square {
height: 200px;
width: 200px;
background-color: hsl(50,88%,50%);
}
.circle {
border-radius: 50%;
width: 150px;
height: 150px;
background-color: hsl(22,88%,50%);
}
所有的背景颜色都使用hsl颜色。得到的结果如下所示：
这里需要注意几件事情：
- 通常情况下，
flex属性都被应用到包裹元素上，而不是应用在子元素上。这是一个比较容易混乱的地方，大多数开发者都习惯与控制目标元素，而不是它们的父元素。 flex容器中的每一个直接子元素都被认为是一个“flex item”。但是子元素中的内容不会继承这些属性，你可以为子元素中的内容赋予任何CSS样式。- 在
flex子项中设置Block、inline、float和text-align没有任何意义。 - 默认情况下，
flex子项对齐于它的父元素的左上角。
Flex对齐
属性，让我们来改变flex的水平对齐方式。从左向右的flex-item布局被描述为flex-start，我们想要从右向左布局可以修改为flex-end：
#item-container { justify-content: flex-end; }
再来看一下其它的可用的配置：
#item-container { justify-content: center; }
如果要使用CSS的其它布局方式来获得上面的结果，至少还需要一个元素和一些额外的CSS代码。接着再来看：
#item-container { justify-content: space-between; }
space-between属性会最大化分布它里面的元素。
#item-container { justify-content: space-around; }
space-around属性就像在每个元素上都使用了margin:0 auto;一样。这种情况下，flex-item会均匀的分布，并且每一个元素都居中与它自己的空间中。
你可能已经注意到，上面的居中只是水平方向上的居中，那么如何垂直居中呢？
#item-container { justify-content: space-between; align-items: center; }
flex-start（默认）等效于“align top”，flex-end等效于“align bottom”和stretch。
前面提到过，flexbox可以让我们调整元素的顺序，下面的小例子我们将方形的元素放置在圆形元素的前面：
.square { order: -1; }
是不是非常神奇？flexbox可以让我们打破页面元素的束缚，任意排列它们的顺序：通常情况下，先写的HTML元素会显示在前面。以前只能通过javascript来完成这个工作，现在仅使用CSS就可以完成了。
这篇文章只是介绍了flexbox的一部分内容，在接下来的文章中我们将继续介绍有关flexbox的相关知识，希望这些内容对你有所帮助！
相关阅读：制作简单的MASONRY瀑布流图片布局
