响应式布局利器—我对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，依次展示效果如下，默认情况不做展示



flex-wrap当布局的flex元素，超过当前的整体宽度时，设置该属性，元素将另起一行重新进行排列。
可取值为：wrapper| nowrapper | wrapper-reverse | column-reverse，依次展示如下



flex-flow是前面两个属性之合。
可取值为：row no-wrapper | row wrapper | column no-wrapper | column wrapper按这种顺序依次组合。
组合结果这里不再做展示。
justify-content描述了项目在主轴上的对齐方式，具体如何对齐，取决于当前所定义的轴的方向。
可取值为：flex-start | flex-end | center | space-between | space-around
当flex-direction为row的时候，分别对应一下的结果，可以看到end方向上，留的空白位置较多





space-between：flex元素两端对齐。
space-around： flex元素本身左右两边间距相等。
当flex值为column时，展示结果依次如下所示：





align-items定义了元素在纵轴上的对齐方式。
可取值为：flex-start | flex-end | stretch | center | baseline这里的结果展示大家可自己试一下。
align-content定义了元素多个轴线上的对齐方式。
可取值为：flex-start | flex-end | stretch | center | space-between | space-around

flex项目

flex项目，为包裹在flex容器下的子元素，只要父元素用display:flex定义了，这个父元素下的item就全部变成了flex项目，默认情况下，为横向排列，宽度只相等的，展现形式类似块级元素的dom结构。
flex项目属性:能够定义在flex项目上的属性
. order
.flex-grow
.flex-shrink
.flex-basis
.flex
.align-self

order规定了flex项目，按照什么样的顺序展示。
flex-grow规定了flex项目放大显示的倍数。下图展示了其他项目为1，2项目放大3倍时的展示情况，如果不设置该属性，默认为1，即使在有剩余空间的情况下也不会自动放大。

flex-shrink规定了flex项目缩小显示的倍数。
flex-basis规定在分配多余空间时，自动计算的空间值。
flex为上面三个属性的缩写值合写形式，后两个参数即flex-shrink、flex-basis可以省略。一般都取为1
align-self定义了当前项目，与其他项目显示的差别。
可取值为flex-start | flex-end | center | baseline | stretch

flex布局，在实际开发过程中，是相当便捷的。而且在响应式开发中，也占据了很重要的位置，希望本文的基本概念，能给大家带来些收获。