Flexbox（弹性盒布局模型）以及适用场景

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【Flexbox（弹性盒布局模型）以及适用场景 】

大家好，今天给大家分享一下，Flexbox（弹性盒布局模型）以及适用场景

1.背景介绍

 

布局的传统解决方案，基于盒状模型，依赖display属性+ position属性+ float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。(ie10及以上)。

 

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

2.知识剖析

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

.box {

display: flex;

}

行内元素也可以使用Flex布局

.box {

display:inline-flex;

}

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross en