flexbox布局

资料总结

#完整指南（包括相关定义、相关属性和一些简单的例子）

    css-tricks（国外一个很好的css例子的网站）

    w3cplus对以上文章的中文翻译，请对照以上英文版来学习

#以图的形式更好地理解一些相关属性

    quackit（css属性文档和实例，有运行效果可以查看相关属性的效果，最好翻墙查看会比较快）

#很多例子

    css-tricks的例子

    一些简单的小例子

    来自腾讯游戏的一些比较简单的例子

   FlexboxFroggy(游戏形式展示flexbox较多例子)

    chris wright的实验及其扩展

定义

一些定义

相关属性

来自菜鸟的图解

display:flex/inline-flex

display：flex

同理得->左边为clear和vertical-align无效，右边为有效

display:inline-flex

例子

完美居中

普通margin无法上下居中

<div class="wrap">
	<div class="center"></div>
</div>

.wrap{
        width: 500px;
	height: 300px;
	background-color: #D3520C;
	border: 5px solid black;
	margin: 0;
}
.center{
	width: 200px;
	height: 100px;
	background: #196BA9;
	border:3px solid black;
	margin: auto;
}

？？margin居中原理？？

定宽定高设置margin为auto可以水平居中但垂直不行-segmentfault

来自stackoverflow的回答

来自w3官方文档的回答

？？margin什么时候不起作用？？

mooc关于margin的解说

flex中的margin可上下居中

<div class="flexwrap">
	<div class="flexcenter"></div>
</div>

.flexwrap{
	width: 500px;
	height: 300px;
	background-color: #D3520C;
	border: 5px solid black;
	display: flex;
	margin-top: 10px;
		}
.flexcenter{
	width: 200px;
	height: 100px;
	background: #196BA9;
	border:3px solid black;
	margin: auto;}

浏览器兼容