网页设计与制作 课件 页设计与制作 课件 o24 多列等分布局（flex布局）.pptxVIP

;入门测

作业分析

知识回顾

添加音频

audiosrc=”media/song.mp3”mutedautoplayloopcontrols

添加视频

videosrc=”media/movie.mp4”width=”300px”controlsautoplay;传统的布局方案中，依赖float属性设置浮动来实现多列并排，浮动的元素会脱离标准流，使父元素出现浮动塌陷的现象，需要清除浮动来消除塌陷。目前，企业中进行前端开发大量地用到Flex布局。

本任务学习Flex布局的相关概念及Flex容器属性，创建多列等分布局列表。;学习内容;初识Flex布局;初识Flex布局;Flex布局优势;Flex组成;Flex容器有6个属性用来控制项目的排列，如下表所示。;flex-direction属性决定主轴的方向，即项目排列的方向，其常用属性值如下。

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。;flex-wrap属性定义项目在一条轴线排不下时如何换行，其常用属性值如下。

?nowrap（默认值）：项目不换行，容器空间不够时，项目会自动收缩。

?wrap：容器空间不够时会换行排列。

?wrap-reverse：容器空间不