响应式布局利器—我对flex布局的理解

网页布局在前端开发过程中，一直占有举重轻重的作用。它要求我们高保真的还原UI设计师的设计稿，还要求能够适配不同的机型设备，原始的布局，经常采用position、float等定位方式，这种方式在页面开发过程中，响应式方面会显得比较凌乱、繁琐。而且琐碎的css代码也不易维护。在css的发展过程中，逐渐出现了许多的响应式布局方式，今天将介绍的flex布局，就是其中一种。
flex布局，能够将容器，按照特定的比例进行划分，从一维的角度，去更好的对容器进行布局。

• flex容器
• flex项目

flex容器

任何元素都能作为flex容器，只要使用display:flex，进行描述，该容器就成为了一个flex容器。以前在使用过程中，我一直有一个误区，认为只有块级元素才能作为一个flex容器。其实行内元素也是可以称作flex容器的。可以看到块级元素和内联元素使用flex布局后，能达到一样的效果。

flex容器属性:能够定义在flex容器上的属性
.flex-direction
. flex-wrap
.flex-flow
.justify-content
.align-content
.align-items

flex-direction规定容器中，flex项目的排列方式。默认情况下是沿着横轴依次排列。
可取值为：row | row-reverse | column | column-reverse，依次展示效果如下，默认情况不做展示