前端基础知识第二章---移动WEB开发之flex布局

前端基础知识第二章---移动WEB开发之flex布局

• • 一、flex布局体验
  • • （1）传统布局与flex布局
    • （2）flex布局初体验
  • 二、flex布局原理
  • 三、flex布局父项常见属性
  • • （1）常见父项属性
    • （2）flex-direction 设置主轴的方向（重点）
    • （3）justify-content 设置主轴上的子元素排列方式（重点）
    • （4）flex-wrap 设置子元素是否换行（重点）
    • （5）align-items 设置侧轴上的子元素排列方式（单行 重点）
    • （6）align-content 设置侧轴上的子元素的排列方式（多行 重点）
    • （7）align-content 和 align-items 区别
    • （8）flex-flow
  • 四、flex布局子项常见属性
  • • （1）flex 属性（重点）
    • （2）align-self 控制子项自己在侧轴上的排列方式
    • （3）order 属性定义项目的排列顺序
  • 五、案例分析及小知识点补充
  • 六、总结

一、flex布局体验

（1）传统布局与flex布局

标签：WEB,子项,flex,align,布局,---,主轴,属性
来源： https://blog.csdn.net/battledao/article/details/122862776