了解Flex布局和基本概念

了解Flex布局

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

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

Flex布局背景

在Flexbox Layout（柔性盒）模块的目的在于提供一种更有效的方式来布置，调整和项目之间在一个容器中分配空间，即使它们的大小是未知的和/或动态的（因此单词“flex”）。

flex布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序），以最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。Flex容器扩展项目以填充可用空间，或缩小它们以防止溢出。

最重要的是，flexbox布局与方向无关，而不是常规布局（基于垂直的块和基于水平的内联块）。虽然这些页面适用于页面，但它们缺乏灵活性（没有双关语）来支持大型或复杂的应用程序（特别是在方向更改，调整大小，拉伸，缩小等方面）。

注意： Flexbox布局最适合应用程序的组件和小规模布局，而Grid布局则适用于更大规模的布局。

浏览器对最新的flexbox规范的支持是：

• Chrome 29+（谷歌浏览器）
• Firefox 28+（火狐浏览器）
• Internet Explorer 11+（IE浏览器）
• Opera 17+（Opera浏览器）
• Safari 6.1+（Safari浏览器）前缀-webkit-
• Android 4.4+（Android 浏览器）
• iOS 7.1+（iOS 浏览器）前缀-webkit-

你可以看到详细的浏览器支持和兼容性这里。

基本概念

由于flexbox是一个完整的模块而不是单个属性，因此它涉及很多东西，包括它的整个属性集。其中一些意图设置在容器上（父元素，称为“flex容器”），而其他设置意味着设置在子容器上（称为“flex项目”）。

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

项目默认沿主轴排列。

• 单个项目占据的主轴空间叫做main size
• 占据的交叉轴空间叫做cross size。

用法

要使用flexbox布局，只需display在父HTML元素上设置属性：

.flex-container {
  display: flex;
}

或者，如果要将其显示为内联元素，请使用：‘

.flex-container {
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。

.flex-container {
  display: -webkit-inline-flex; /_ Safari _/
  display: flex;
}

注意：这是您需要在父容器上设置的唯一属性，其所有直接子项将成为自动弹性项目。
设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。