1、flex兼容性
根据caniuse（http://caniuse.com/#search=flex），flex布局在IE6-9不支持。
因此，flex布局主要应用在移动端。
2、基础测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.item {
/*flex布局*/
display: flex;
}
</style>
</head>
<body>
<div class="item">
<div class="item-img">
<img src="img/aaa.jpg" alt="" />
</div>
<div class="item-desc">
<h3>说明</h3>
</div>
</div>
</body>
</html>
效果：
说明：
将父元素设置为flex布局后，子元素也默认成了弹性元素，子元素并会自动沿主轴方向横向排列。
3、弹性布局轴
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.hb-shelf {
/*flex布局*/
display: flex;
}
.item {
width: 240px;
border: 1px solid red;
}
</style>
</head>
<body>
<section class="hb-shelf">
<article class="item">
1
</article>
<article class="item">
2
</article>
<article class="item">
3
</article>
<article class="item">
4
</article>
</section>
</body>
</html>
给item设置宽度后，在浮动布局中，浏览器尽可能显示article的元素，直到填充满一整行才折行显示。
在flex布局中，flex-wrap: nowrap;值优先级高于article的宽度值width。当屏幕宽度小于960px时，保证所有的article等分扩展填充；当屏幕宽度大于960px时，右侧留空白。
效果：
