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.