一、简介传统的CSS布局基本就是div+css布局，依赖于盒模型，通过position、float、display等实现，但是对于一些特殊布局，不太容易实现，比如垂直居中布局。2009年，W3C提出了一种新的解决方案——Flex布局，可以以简单、完整、响应式的方式实现各种页面布局。目前大多数浏览器都支持Flex属性。一直在用Flex，但是只知道一些属性怎么用，有些属性我都不知道怎么用，比如：order，flex-grow等。写这篇文章的目的是主要是做一个总结和整理，加深印象。2、什么是Flex布局Flex是FlexibleBox的缩写，意思是“弹性布局”。CSSflexibleboxlayout是CSS的模块之一，定义了一种针对用户界面设计优化的CSS盒子模型。在弹性布局模型中，弹性容器的子元素可以任意方向排列，也可以“弹性扩展”它的尺寸，要么增大尺寸填充未使用的空间，要么缩小尺寸防止父元素溢出。子元素的水平对齐和垂直对齐可以很容易地操作。可以通过嵌套框（垂直框内的水平框，或水平框内的垂直框）以二维方式构建布局。——MDN3.基本概念3.1.容器采用弹性布局的元素称为弹性容器，简称“容器”。它的所有子元素都自动成为容器成员，称为弹性项（flexitem），简称“项”，也称为弹性元素。3.2.两轴Flex的两个轴分别是主轴和横轴，可以简单理解为水平方向和垂直方向。默认情况下，主轴对应水平方向，横轴对应垂直方向，但这种对应关系是可以修改的（通过flex-direction属性）。在很多情况下，我们确实需要修改它。如何修改它会在下面讨论到达。3.3.在开始行和结束行之前，我们一般默认文档是从左往右写的，但是Flex没有左右的概念。默认情况下，flex-direction属性的值为row，表示主轴是水平的。起跑线（即起点）在左边。flex-direction属性还有其他的属性值，这里就不一一列举了，后面会详细介绍。4.CSS属性4.1。使用Flex布局将元素指定为Flex容器非常简单。.box{display:flex;}内联元素也可以指定为弹性容器。.box{display:inline-flex;}基于Webkit的浏览器。.box{显示：-webkit-flex；/*Safari*/display:flex;}注意设置flex布局后，子元素的float、clear、vertical-align属性将失效。4.2.容器的属性容器可以设置以下6个属性：flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content首先初始化我们的页面/*HTML*/
