flex布局原理简介

前言：

在面试过程中，我发现，flex布局经常被问道，但是其实我只是知道它都有些什么属性及怎么用，但是都没有真正去理解他是怎么实现的，被问到的时候就会觉得不专业，所以看了资料后，简要总结。

一、是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，是W3C 提出的一种新型布局方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。

顾名思义，弹性布局中的元素是有伸展和收缩自身的能力的。 相比于原来的布局方式，如float、position，根据盒子模型，就可以计算出元素的展示尺寸（长宽非百分比），除非溢出，否则不依赖于父容器的大小。而弹性布局中元素的大小是高度依赖父容器的大小的。因为，它所具有的“伸缩性”，目标就是为了撑满父元素。当然也可以通过相关css属性控制其是否撑满、撑满什么轴。

二、原理

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

Flex 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。项目默认沿主轴排列，当然项目的排列方向也可以通过改变属性来控制。

主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

三、容器属性 

以下六个属性设置在容器上

1. flex-direction         决定主轴的方向（即项目的排列方向）
2. flex-wrap               项目是否换行及换行方向
3. flex-flow                flex-direction属性和flex-wrap属性的简写形式
4. justify-content       定义了项目在主轴上的对齐方式
5. align-items            定义了项目在交叉轴上的对齐方式
6. align-content         定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

四、项目属性 

以下六个属性设置在容器上

1. order       定义项目的排列顺序。数值越小，排列越靠前，默认为0
2. flex-grow    定义项目的放大比例，默认为0，即不放大
3. flex-shrink   定义项目的缩放比例，默认为0，即不缩放
4. flex -basis   定义了在分配多余空间之前，项目占据的主轴空间
5. flex        flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
6. align-self   允许单个项目有与其他项目不一样的对齐方式