完整文章地址http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
使用浮動(float)的一個比較疑惑的事情是他們怎么影響包含他們的父元素的。如果父元素只包含浮動元素，且父元素未設置高度和寬度的時候。那么它的高度就會塌縮為零。那我們就不能
做高度根據內容自動調整的布局，但是利用flex布局可以實現，不需要設置父元素的寬度和高度，讓父元素根據子元素自動調整大小。
Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為Flex布局：.div{dispaly:flex}.采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員。這里我主要說一下容器的一個屬性flex-direction.他有4個取值分別為：row、row-reverse、column、column-reverse.
row（默認值）：主軸為水平方向，起點在左端。row-reverse：主軸為水平方向，起點在右端。column：主軸為垂直方向，起點在上沿。column-reverse：主軸為垂直方向，起點在下沿。
代碼如下：
可以通過設置flex-direction屬性得到不同的效果。下面代碼只是設置{flex-direction:row}。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style type="text/css">
.div1{
display: flex;
flex-direction: row;
border:1px solid red;
width:300px;
}
.div1 div{
border:1px solid black;
margin:10px 10px;
width:50px;
height:50px;
}
</style>
</head>
<body>
<div class="div1">
<div>a
</div>
<div>b
</div>
<div>c
</div>
</div>
</body>
</html>