认识flexbox
Flexbox翻译为弹性盒子。弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间。通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout)。
flex布局是目前web开发中使用最多的布局方案：flex 布局（Flexible 布局，弹性布局）目前特别在移动端可以说已经完全普及。在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局。
为什么需要flex布局呢?长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有 floats 和 positioning。但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举。
原来的布局存在哪些痛点呢? 举例说明:
- 比如在父内容里面垂直居中一个块内容
- 比如使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用
- 比如使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同
所以长久以来, 大家非常期待一种真正可以用于对元素布局的方案: 于是flex布局出现了。flexbox在使用时, 我们最担心的是它的兼容性问题，我们可以在caniuse上查询到具体的兼容性。
flex布局两个重要的概念：开启了 flex 布局的元素叫 flex container。flex container 里面的直接子元素叫做 flex item。
当flex container中的子元素变成了flex item时, 具备以下特点:
- flex item的布局将受flex container属性的设置来进行控制和布局
- flex item不再严格区分块级元素和行内级元素
- flex item默认情况下是包裹内容的, 但是可以设置宽度和高度
设置 display 属性为 flex 或者 inline-flex 可以成为 flex container。
- flex： flex container 以 block-level 形式存在
- inline-flex： flex container 以 inline-level 形式存在
