flex布局

什么是flex布局？

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

任何一个容器都可以指定为Flex布局。

使用flex布局和普通布局相比有什么不同？

传统布局：基于盒模型，依赖 display属性 、position属性 、float属性；

flex布局：flex 是 flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

使用flex布局有什么优点

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

基本概念

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

容器的属性

以下6个属性设置在容器上。

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content