Web前端开发（HTML5+CSS3+JavaScript） 课件 第7章 弹性布局.pptx

Web前端基础技术;;弹性(Flex)布局：一种新的实现行、列布局的方式，也是当前WEB主流的布局方式。;;概念：默认情况下（不设置容器其他属性），任何一个容器包含两根轴

（3）主轴：水平方向的横轴，项从左到右排列；

（4）交叉轴：垂直方向的纵轴；

（5）主轴起点：左侧；终点：右侧。

（6）交叉轴起点：顶端；终点：底端。;二容器属性：指示容器中的项如何排列，如何对齐，是否分行;2.flex-wrap：项是否换行。;示例：一个弹性容器div，宽度400px，可换行，包含一组链接（padding:10px20px）

;3.justify-content：项在每根主轴上的对齐方式，通过设置宽度来观察效果。;示例：一个弹性容器div，宽度400px，可折行，包含一组链接（padding:10px20px）

主轴对齐方式：（1）起点对齐（左对齐，默认）；（2）终点对齐（右对齐）；（3）主轴居中对齐；（4）两端对齐；（5）环绕对齐

;4.align-content：项整体在交叉轴上的对齐方式---测试时，需要设置一定的高度，项必须可折行（多行）;示例：一个弹性容器div，宽度400px，可折行，包含一组链接（padding:10px20px）

主轴对齐方式：（1）起点对齐（左对齐，默认）；（2）终点对齐（右对齐）；（3）主轴居中对齐；（4）两端对齐；（5）环绕对齐；

交叉轴