flex布局原理简介

前言：

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

一、是什么？

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

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

二、原理

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

Flex 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴