《响应式页面设计》-项目1弹性盒布局_第1页
《响应式页面设计》-项目1弹性盒布局_第2页
《响应式页面设计》-项目1弹性盒布局_第3页
《响应式页面设计》-项目1弹性盒布局_第4页
《响应式页面设计》-项目1弹性盒布局_第5页
已阅读5页，还剩2页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

使用弹性盒容器的属性整体控制子元素21认识Flex弹性盒布局3使用弹性子元素的属性个别控制子元素学习目标掌握掌握掌握1、为什么使用弹性布局任务1.1认识Flex弹性盒布局2、初识Flex弹性布局1.1.1为什么使用弹性布局用百分比设置宽度在窄屏浏览器中的显示效果固定宽度布局的局限将Flex是FlexibleBox的缩写，意为“弹性的盒子”，是在CSS3中引入的。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。弹性盒布局多应用于移动端web开发。任何一个容器都可以指定为Flex布局，块级弹性盒子。用Flex布局的元素，称为Flex容器（flexcontainer），简称“容器”，它的所有子元素自动成为容器成员，称为Flex项目（flexitem），简称“项目”。。1.1.2初识Flex弹性布局弹性（伸缩）盒子由弹性容器和弹性子元素组成。弹性容器通过设置display属性的值为flex或inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素，如图所示。1.1.2初识Flex弹性布局弹性盒会拥有一个主轴和一个侧轴（交叉轴），且主轴、侧轴都就有方向，默认主轴是水平，方向从左到右，侧轴（交叉轴）就垂直于主轴，就是垂直方向，方向上向下。。属性 描述flex-direction 指定弹性容器的主轴和主轴方向flex-wrap 设置弹性盒子的子元素超出父容器时是否换行flex-flow flex-direction和flex-wrap的简写justify-content 设置弹性盒子元素在主轴方向上的对齐方式align-items 设置弹性盒子元素在侧轴方向上的对齐方式align-content 设置多行元素在侧轴（交叉轴）上的排列方式，修改flex-wrap属性的行为，类似align-items，但不是设置子元素对齐，而是设置行对齐任务1.2使用弹性盒容器的属性整体控制子元素对弹性盒容器可以进行如下属性设置，可以实现对子元素的整体控制，改变子元素的排列方式等。如果一个元素设置成弹性布局，这些属性对子元素产生什么样的影响呢？弹性盒容器有以下属性可以通过设置某个弹性子元素的属性，来控制单个元素的位置、排列顺序等，可以设置的属性如下表，这些属性的设置，对子元素的布局会产生影响任务1.3使用弹性子元素的属性个别控制子元素属性 描述align-self 设置弹性盒子元素在侧轴上的排列方式，覆盖容器的align-items属性。flex-grow 设置弹性盒子元素的扩展比率。flex-shrink 设置弹性盒子元素的收缩规则。flex元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据flex-shrink的值。flex-basis 设置弹性盒子元素伸缩基准值。flex 是flex-g

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论