- 1、本文档共30页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
FLEX 布局
课程介绍2布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式:1、在不同方向排列元素2、重新排列元素的显示顺序3、更改元素的对齐方式4、动态地将元素装入容器
Flex布局01为什么要学习Flex布局0203主要内容Flex布局的基本概念课后习题
为什么要学习Flex布局?0101
例子:实现子盒子在父盒子里水平垂直居中56句代码
例子:Flex实现子盒子在父盒子里水平垂直居中63句代码
0202Flex布局的基本概念
2.1 Flex 布局是什么?8Flex 是 Flexible Box 的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。注意:设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
2.1 Flex 布局是什么?9采用 Flex 布局的元素,称为 Flex 容器(flex container),简称容器。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称项目。
2.1 Flex 布局是什么?10容器默认存在两根轴:主轴(main axis)和交叉轴(cross axis)。主轴默认是水平的那根,交叉轴默认是垂直那根。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
2.2 容器的属性11flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content需要设置在容器上。
flex-direction属性12flex-direction属性决定主轴的方向(即项目的排列方向)。row(默认值):主轴为水平方向,起点在左端。row-reverse:主轴为水平方向,起点在右端。column:主轴为垂直方向,起点在上沿。column-reverse:主轴为垂直方向,起点在下沿。
justify-content属性13justify-content属性定义了项目在主轴上的对齐方式。flex-start(默认值):左对齐flex-end:右对齐center: 居中space-between:两端对齐,项目之间的间隔都相等。space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
justify-content属性14justify-content属性定义了项目在主轴上的对齐方式。
align-items属性15align-items属性定义项目在交叉轴上如何对齐。它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。flex-start:交叉轴的起点对齐。flex-end:交叉轴的终点对齐。center:交叉轴的中点对齐。baseline: 项目的第一行文字的基线对齐。stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
flex-wrap属性16默认情况下,项目都排在一条线(又称轴线)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。它可能取三个值。(1)nowrap(默认):不换行。(2)wrap:换行,第一行在上方。(3)wrap-reverse:换行,第一行在下方。
align-content属性17align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
flex-flow属性18flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。.box { flex-flow: flex-direction || flex-wrap;}
2.2 项目的属性19orderflex-growflex-shrinkflex-basisflexalign-self以下6个属性设置在项目上。
order属性20order属性定义项目的排列顺序。数
您可能关注的文档
最近下载
- 国开04020_管理英语4-机考复习资料.docx
- 化工热力学常用数据手册.pdf
- 学堂在线运动损伤学习题答案加考试答案.docx
- 2020-2021学年晋中市榆次区现代双语学校七年级下学期期末数学模拟试卷(含答案解析).docx
- 室内装修工程临时用电专项方案.doc
- 中国画鉴赏精品课件精品课件.pptx VIP
- 班组长实训案例教学PPT.ppt
- 广西柳州市2022-2023学年八年级下学期期末物理试卷(含答案).docx VIP
- 航天航空与国防行业:火炸药及弹药安全生产十问十答,云起龙骧.pdf VIP
- 2023-2024学年云南省昭通市小学语文五年级期末通关测试题详细参考答案解析.docx
文档评论(0)