flex弹性布局用法笔记

（本笔记用于参考查找）
@TOC

  这个是弹性布局必须要的属性，让竖的变横弹性布局之所以功能强大灵活，是因为它打破了很多原有的规则。可以将任意元素设置为弹性布局，弹性布局会对其内部的子元素产生影响：

1. 块级元素不再单独占据一行（它是一维布局）。
2. 如果块级元素没有显式规定宽度，也不会横向铺满父元素。
3. float、clear和vertical-align属性会失效。
4. 在父级元素上定义display:flex;那么孩子就属于弹性布局了。

（1）row：默认值，主轴是水平的，起始位置在左侧，项目从左到右排列。
（2）row-reverse：主轴是水平的，起始位置在右侧，项目从右到左排列。
（3）column：主轴是垂直的，起始位置在顶端，项目垂直显示，从上到下。
（4）column-reverse：主轴是垂直的，起始位置在底部，项目垂直显示，从下到上。

代码：

		
		#main1{
			width:400px;
			display:flex;
			flex-direction: row;
			background: #ccc;
		}
		#main1 div{
			width:50px;
			height:50px;
		}
		
		#main2{
			width:400px;
			display:flex;
			flex-direction: row-reverse;
			background: #ccc;
		}

		#main2 div{
			width:50px;
			height:50px;
		}

 #main2 {
     width: 200px;
     display:flex;
     flex-wrap: wrap;
     background:#ccc;
 }
 #main2 div {
     width: 50px;
     height: 50px;
     text-align:center;
     line-height:50px;
 }

		#main {
			width: 200px;
			display:flex;
			flex-flow:row-reverse wrap;
			background:#ccc;
		}
		#main div {
			width: 50px;
			height: 50px;
			text-align:center;
			line-height:50px;
		}

		#main1 {
			width: 400px;
			background:#ccc;
			display: flex;
			justify-content:space-between;
		}
		#main1 div {
			width: 70px;
			height: 70px;
			text-align:center;
			line-height:70px;
		}

		#main2 {
			width: 400px;
			background:#ccc;
			display: flex;
			justify-content:center;
		}
		#main2 div {
			width: 70px;
			height: 70px;
			text-align:center;
			line-height:70px;
		}

 #main {
     width: 200px;
     height: 100px;
     background:#ccc;
     display: flex;
     align-items: center;
 }
 #main div {
     width: 70px;
	    	height: 20px;
 }

    #main {
 width: 200px;
 height: 300px;
 background:#ccc;
 display: flex;
 flex-wrap: wrap;
 align-content:space-between; 
    }
    #main div {
 width: 50px;
 height: 20px;
    }

"main">
    "background-color:red;">1
    "background-color:coral;">2
    "background-color:yellow;">3
    "background-color:green;">4

    "background-color:red;">1
    "background-color:coral;">2
    "background-color:yellow;">3
    "background-color:green;">4

    "background-color:red;">1
    "background-color:coral;">2
    "background-color:yellow;">3
    "background-color:green;">4
    
    "background-color:red;">1
    "background-color:coral;">2
    "background-color:yellow;">3
    "background-color:green;">4

 #main {
     width: 300px;
     height: 200px;
     background:#ccc;
     display: flex;
     flex-flow: row wrap;
 }
 #main div {
     width: 70px;
     height: 70px;
 }
 #main div:nth-child(2n) {
     align-self: center;
 }

"main">
    "background-color:coral;">
    "background-color:green;">
    "background-color:blue;">
    "background-color:red;">
    "background-color:yellow;">

 #main {
     width:400px;
     height:150px;
     display:flex;
     background:#ccc;
 }
 #main div{
     width:70px;
     height:70px;
 }
 div#coral{order:2;}
 div#lightblue{order:4;}
 div#lightgreen{order:3;}
 div#pink{order:1;}

    
1coral
    
2lightblue
    
3lightgreen
    
4pink

 #main {
     width: 350px;
     height: 100px;
     background:#ccc;
     display: flex;
 }

 #main div{flex-basis:50px;}

 #main div:nth-of-type(1) {flex-grow: 1;}
 #main div:nth-of-type(2) {flex-grow: 3;}
 #main div:nth-of-type(3) {flex-grow: 1;}
 #main div:nth-of-type(4) {flex-grow: 1;}
 #main div:nth-of-type(5) {flex-grow: 1;}

 #main {
     width:350px;
     height:100px;
     background:#ccc;
     display:flex;
 }
 #main div {
     flex-shrink:1;
     flex-basis:100px;
 }
 #main div:nth-of-type(2) {flex-shrink:3;}