FIex 布局

Flex 布局 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position 属性 + float 属 性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009 年，W3C 提 出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它 已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

一、Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。

二、基本概念 ： 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子 元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

二、基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子 元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平主轴（main axis）和垂直的交叉轴。主轴的开始位置（与 边框的交叉点）叫做 main start，结束位置叫做 main end；交叉轴的开始位置叫 cross start，结束位置叫 cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size，占据的交叉轴的空间 叫做cross size。

3.1 flex-diretion 属性 Flex-ditrtion 属性决定主轴的方向（即项目的排列方向） 。 3.2 flex-wrap 属性 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap 属性定义，如果一条轴 线排不下，如何换行。

flex-flows 属性 flex-flow 是 flex-direction 和 flex-wrap 属性的简写，默认值是row nowrap。 2、justify-content 属性 Justify-content 属性定义了项目在主轴上的对齐方式。 3、align-items 属性 Align-item 属性定义了项目在交叉轴上的对齐方式。4、align-content 属性 align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起 作用。 5、order 属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。 6、flex-grow 属性定义项目的方法比例，默认值为 0，即如果存在剩余空间，也不放大。 7、flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 负值对该属性无效。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。