主轴和交叉轴Web前端交互和框架技术在线开放64课件讲解.pptx

主轴和交叉轴《Web前端交互和框架技术》在线开放课程

目录CONTENT识主轴和交叉轴主轴的特点交叉轴的特点主轴和交叉轴的应用技巧

认识主轴和交叉轴01PPT下载/xiazai/

认识主轴和交叉轴01什么是主轴和交叉轴主轴交叉轴Flex布局的基础框架

主轴的特点02PPT下载/xiazai/

主轴的特点02主轴的重要性主轴的重要属性--flex-direction主轴Flex布局决定项目排列方向的关键轴线rowflex-direction属性Flex项目沿水平方向排列columnFlex项目沿垂直方向排列row-reverseFlex项目沿垂直方向排列column-reverseFlex项目沿垂直方向排列

交叉轴的特征03PPT下载/xiazai/

交叉轴的特征交叉轴依赖于主轴的方向

主轴和交叉轴的应用技巧04PPT下载/xiazai/

主轴和交叉轴的应用技巧04

主轴和交叉轴的应用技巧04flex-wrap属性案例代码演示三个子元素设置了flex-wrap:wrap，当这三个子元素宽度总和超过.box容器时，就会自动折行展示代码运行效果

主轴和交叉轴的应用技巧04flex-wrap有三个可选属性①nowrap（默认）：不换行②wrap：换行，第一行在上方③wrap-reverse：换行，第一行在下方

主轴和交叉轴的应用技巧04align-ite