01. flex的介绍

了解flex布局、它与传统布局的区别及应用场景
对比:
- 传统布局：
  - 兼容性好、布局繁琐、浮动（清除浮动）
  - 有局限性不能在移动端很好的布局
- flex布局：
  - 操作方便，布局极其简单，移动端使用比较广泛
  - PC端浏览器支持情况比较差
使用：
- 如果是PC端页面布局，采用传统方式；如果是移动端或者是不考虑兼容的PC端则采用flex布局；
特点：
- 任何一个标签都可以指定使用 flex 布局。
- 当为父标签设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
- 使用思想上和传统盒子完全不同，不要再想子元素是块级元素、行内元素，
- flex通过行和列的思路来控制布局；
名称：
- 采用 flex 布局的元素，称为 flex 容器（flexcontainer），父级简称”容器”。
- 它的所有子元素自动成为容器成员，称为 flex 项目（flexitem），简称”项目”。
语法：flex布局入口，加在容器上
- display:flex;
  02. 容器属性
  1、flex-direction
作用：确认主轴的选择
特点：把主轴确认，元素默认按照确认的主轴方向进行排布

语法:

flex-direction:row /* 默认值 从左到右 */

语法：

/* 默认值 不换行；子项目加起来的宽度超过父级的宽度时，子项宽度会被缩小，宽度只是不生效，必须设置 */
flex-wrap:nowrap;
/* 换行； 子项的总宽加起来超过父级宽度，就会换行*/
flex-wrap:wrap;

4、align-items

注意: stretch 如果项目未设置高度或设为auto 将占满整个容器的高度

注意: 容器内必须有多行的项目，该属性才能渲染出效果。

作用：子元素去占有（划分）在主轴上的剩余空间
语法：

.item {
  // 百分比或者是1~10的数字
  flex: 20% 或者 2;
}

作用：控制子项，自己在侧轴上的对齐方式；
特点：
- 默认值auto，父级设置了align-items ，auto继承父级元素上设置侧轴的对齐方式：align-items 属性；
- 如果父级没有设置align-items 属性，auto默认值会变为strecth；
语法：

注意：
- align-self默认值为 auto，表示继承父元素的 align-items 属性。
- 但如果父级没有设置align-items，align-self的默认值为 auto就为strecth；
  04. flex布局的导航栏
图例