CSS学习笔记：flexbox

Flexbox布局模块旨在提供一种更有效的方式来在容器中的项目之间布置，对齐和分布空间，即使它们的大小是未知的或动态的。

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

最重要的是，flexbox布局是方向无关的，而不是常规布局（块是基于垂直的，内联是水平的）。虽然这些对于页面工作良好，但它们对于大型或复杂应用程序缺乏灵活性，尤其是在方向更改，调整大小，拉伸，缩小等方面。

注意：Flexbox布局最适合应用程序的组件和小规模布局，而网格布局适用于较大比例的布局。

兼容性：IE11

概念

在定义方面来说，弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。
弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。

块级布局更侧重于垂直方向、行内布局更侧重于水平方向，与此相对的，弹性盒子布局算法是方向无关的。

• 弹性容器：包含着弹性项目的父元素。
  通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。

• 弹性项目：弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。

• 轴：每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。

  • flex-direction 确立主轴方向。
  • justify-content 定义了在当前行上，弹性项目沿主轴如何排布。
  • align-items 定义了在当前行上，弹性项目沿侧轴默认如何排布。
  • align-self 定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 align-items 所确立的默认值。

• 方向(Direction)
  弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由 writing-mode 确立的方向（从左到右、从右到左，等等）。

  • order 属性将元素与序号关联起来，以此决定哪些元素先出现。
  • flex-flow 属性是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布。

• 行(Line)
  根据 flex-wrap 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。

• 尺寸：根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为主轴尺寸(main size) ，对应侧轴的称为 侧轴尺寸(cross size)。
  
  • fl