1.怪异盒模型

• 标准盒模型 box-sizing:content-box
  • 元素的宽度(不包含外边距) = width内容区域+左右内边距+左右边框
• 怪异盒模型 box-sizing:border-box
  • 元素的宽度(不包含外边距) = width
  • 怪异盒模型的width把内容、内边距和边框都包含在内

• 移动端 *{box-sizing:border-box}

  2.弹性盒 / flex布局

  2.1 父元素添加的属性

• 1.display:flex/inline-flex;

  • flex将对象作为弹性伸缩盒显示
  • inline-flex将对象作为内联块弹性伸缩盒显示
• 2.flex-direction (主轴排列方向)
  • row 默认，横向一行排列
  • row-reverse 反转横向排列
  • column 纵向排列
  • column-reverse 反转纵向排列
• 3.justify-content(主轴对齐方式)
  • flex-start 默认，顶端对齐
  • flex-end 末端对齐
  • center 居中对齐
  • space-between 两端对齐，中间自动分配
  • space-around 中间距离为两端二倍
  • space-evenly 等距离分配
    • 默认元素在主轴上容不下不会换行，会被压缩
• 4.align-items(侧轴对齐方式)
  • flex-start 侧轴起始边界
  • flex-end 侧轴结束边界
  • center 居中放置
  • baseline 基线对齐
  • stretch 默认值，项目被拉伸以适应容器，前提是子元素没有在侧轴方向上设置尺寸
• 5.flex-wrap设置换行
  • nowrap 容器为单行，该情况下子项可能会溢出容器
  • wrap 容器为多行，子项内部会发生断行
  • wrap-reverse 反转排列

• 6.align-content(行与行之间对齐方式)

  • flex-start 顶部对齐没有行间距
  • flex-end 底对齐没有行间距
  • center 居中没有行间距
  • space-between 两端对齐，中间自动分配
  • space-around 中间距离为两端二倍
  • space-evenly 等距离分配
  • stretch 默认值，项目被拉伸以适应容器

    2.2 子元素添加的属性

• 1.align-self 灵活容器内被选中项目的对齐方式

  - 可重写灵活容器的align-items属性

  • auto 默认值，元素继承了它的父容器的align-items属性
  • stretch 元素被拉伸以适应容器
  • center 元素位于容器的中心
  • flex-start 元素位于容器的顶部
  • flex-end 元素位于容器的底部
• 2.order 排序优先级
  • 数字越大越往后排，默认为0，支持负数
• 3.flex-grow 项目的放大比例
  • flex-grow:1;
  • 同flex:1;—放大比例
• 4.flex-shrink 项目的缩小比例
  • flex-shrink:0;元素不缩小
• 5.flex-basis 项目的长度
• 6.flex为345的简写形式
  • 默认值flex:0 1 auto;

    3.flex布局练习