CSS Flex 布局资源

      Flex布局不同于平常盒子布局，在Flex布局之下 ，子元素的float、clear和vertical-align属性将不起作用。采用Flex布局时请忘记盒子布局相关概念。Flex中子元素布局，完全按照Flex的容器和子元素自身的flex选项来确定。flex用在响应式web中比较好，一旦采用flex，width， height就不要直接用像素值来表示了，用百分比，再加上min/max width, min/max height来确定元素的最小和最大尺寸。

html头部加入下面的行，根据视口来设置页面宽度。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Flex 布局相关语法介绍

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

Flex布局相关例子

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

https://philipwalton.github.io/solved-by-flexbox/

http://static.vgee.cn/static/index.html

 

响应式web的介绍  https://www.cnblogs.com/libaoli/p/5779629.html