在考虑布局方式的时候，浮动行为似乎已经变得根深蒂固。比如，当两个浮动元素宽度超出它们的父级元素的时候，其中一个元素将会折行显示在另外一个下面。而flexbox布局有一个不同的模型，弹性元素会灵活地根据弹性容器的宽度来表现。

我将会举例说明浮动模型与flexbox模型的区别，例子中将会在一个section元素中设置四个article元素。

 
   
 […] 
 
   
 […] 
 
   
 […] 
 
   
 […] 
 

在没有设置任何样式的情况下，这些article元素将会垂直排列。

这个列表在针对更小的屏幕时，我们不用或者只用做很小的调整。

现在，我们为section元素设置display:flex，刷新后会看到，浏览器会创建一个横向的主轴，article元素将沿着水平方向分布。无需再定义任何额外的flexbox属性，浏览器会自动等分section元素的宽度，让article元素充满父元素的全部可用空间。

文章会沿着section元素的默认主轴方向排列。

当给每一个article元素设置宽度的时候，你也许会感到惊讶。

.item { 
width : 400px; }

在浮动布局中，浏览器只要有空间就会尽可能显示article元素，直到填满一整行再折行显示。

而当增加article元素的宽度时，浮动布局下会很快折行显示。而无论怎样，在flexbox布局中，flex-wrap:nowrap值优先级高于article元素的宽度值width。