flex属性的学习
1.需要记住的属性和值。
-------------------------------------------------------------方向横和纵flex-direction: row | row-reverse | column | column-reverse;
-------------------------------------------------------------
超过怎么办。flex-wrap: nowrap | wrap | wrap-reverse;
-------------------------------------------------------------
以上两个的简写。
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
-------------------------------------------------------------
justify-content属性定义了项目在主轴上的对齐方式。左对齐，右对齐，中间，两端对齐，空间-环绕。
justify-content: flex-start | flex-end | center | space-between | space-around;
-------------------------------------------------------------
align-items属性定义项目在交叉轴上如何对齐。
align-items: flex-start | flex-end | center | baseline | stretch;
-------------------------------------------------------------
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。align-content: flex-start | flex-end | center | space-between | space-around | stretch;
------------------------------------------------------------
2. CSS3 display：flex和display：box有什么区别
box 是旧属性，已经被flex代替。
flex和box都是伸缩盒，具体细节有区别。
一些浏览器可能只支持box.
由于css3还是讨论稿，所以一些属性可能随时被修改。
3.两边都是150px，中间的线的宽度自适应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<div class="a50"></div>
<div id="children">
</div>
<div class="a50"></div>
</div>
<style>
#app{
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
}
#children{
flex:1;
border: 1px solid black;
}
.a50{
flex: 0 0 150px;
border: 1px solid red;
}
</style>
</body>
</html>
4.
5.
6.
