持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第17天，点击查看活动详情
一、认识flexbox
Flexbox翻译为弹性盒子:
弹性盒子是一种用于按行或按列布局元素的一维布局方法;
元素可以膨胀以填充额外的空间,收缩以适应更小的空间;
通常我们使用Flexbox来进行布局的方案称之为flex布局(flex layout);
flex布局是目前web开发中使用最多的布局方案:
flex布局(Flexible 布局，弹性布局);
目前特别在移动端可以说已经完全普及;
在PC端也几乎已经完全普及和使用,只有非常少数的网站依然在用浮动来布局;
为什么需要flex布局呢?
长久以来，CSS布局中唯一可靠且跨浏览器兼容的布局工具只有floats和positioning.
但是这两种方法本身存在很大的局限性,并且他们用于布局实在是无奈之举;
原先的布局存在的痛点
原来的布局存在哪些痛点呢?举例说明:
比如在父内容里面垂直居中一个块内容。
比如使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用。
比如使多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。
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形式存在
三、flex布局的模型
main axis(主轴) cross axis(交叉轴)
