1. 认识flexbox
弹性盒子是一种用于按行或按列布局元素的一维布局方法
目前特别在移动端可以说已经完全普及;
在PC端也几乎已经完全普及和使用, 只有非常少数的网站依然在用浮动来布局;
长久以来，CSS 布局中唯一可靠且跨浏览器兼容的布局工具只有floats 和 positioning。
但是这两种方法本身存在很大的局限性, 并且他们用于布局实在是无奈之举;
2. 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 形式存在
3. flex布局的模型
4. flex相关的属性
应用在 flex container 上的 CSS 属性
- flex-flow
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
应用在 flex items 上的 CSS 属性
- flex-grow
- flex-basis
- flex-shrink
- order
- align-self
- flex
5. flex-direction
flex-direction 决定了 main axis 的方向，有 4 个取值
row（默认值）、row-reverse、column、column-reverse
6. flex-wrap
flex-wrap 决定了 flex container 是单行还是多行
- nowrap（默认）：单行
- wrap：多行
- wrap-reverse：多行 (从最后一行开始沿着主轴方向排列)
7. flex-flow
flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
顺序任何, 并且都可以省略;
8. justify-content
justify-content 决定了 flex items 在 main axis 上的对齐方式
- flex-start（默认值）：与 main start 对齐
- flex-end：与 main end 对齐
- center：居中对齐
image.png
- space-between：
flex items 之间的距离相等
与 main start、main end两端对齐
- space-around：
flex items 之间的距离相等
flex items 与 main start、main end 之间的距离是 flex items 之间距离的一半
- space-evenly：
flex items 之间的距离相等
flex items 与 main start、main end 之间的距离 等于 flex items 之间的距离
9. align-items
align-items 决定了 flex items 在 cross axis 上的对齐方式
- normal：在弹性布局中，效果和stretch一样
- stretch：当 flex items 在 cross axis 方向的 size 为 auto 时，会
自动拉伸至填充 flex container
- flex-start：与 cross start 对齐
- flex-end：与 cross end 对齐
- center：居中对齐
- baseline：与基准线对齐
10. align-content (只有在固定盒子有多余空间时候用)
align-content 决定了多行 flex items 在 cross axis 上的对齐方式，用法与 justify-content 类似
- stretch（默认值）：与 align-items 的 stretch 类似
- flex-start：与 cross start 对齐
- flex-end：与 cross end 对齐
- center：居中对齐
- space-between：
flex items 之间的距离相等
与 cross start、cross end两端对齐
- space-around：
flex items 之间的距离相等
flex items 与 cross start、cross end 之间的距离是 flex items 之间距离的一半
- space-evenly：
flex items 之间的距离相等
flex items 与 cross start、cross end 之间的距离 等于 flex items 之间的距离
