- 1、本文档共28页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
CSS3 Flexbox布局一次搞懂
1. 引言
希望可以通过可视化的方式帮助您了解Flexbox属性如何影响flex布局。
2. 正文
2.1 引入
Flexbox布局官方称为CSS Flexible Box Layout Module是一个CSS3新的布局模块,用于实现容器里项目的对齐、方向、排序(即使在项目大小位置、动态生成的情况)。flex容器最大的特性在于,能够修改子元素的宽度和高度,以满足在不同尺寸屏幕下的如意分布。
许多设计人员、开发人员发现flexbox布局方式使用简单,定位元素更加简单、复杂的布局更容易用较少的代码实现,大大地简化了开发流程。不像块状布局、内联布局那样基于竖直方向、水平方向,flexbox的布局算法基于方向。flexbox布局适用于小的应用组件、新的CSS Grid布局模块更适用于大量的布局。
本指南不解释flex属性如何工作,我们只是用可视化的方式展示flex属性如何影响布局。
2.2 基础
在具体描述flex属性之前,我们先来简要介绍下flexbox模型。flex布局由父容器(我们叫做flex container)和它的子元素(我们叫做flex items)组成。
在上图所示的盒子里,你可以看到用来描述flex container和flex items的属性和术语,如果你想了解详细信息,请访问W3C的flexbox model官方文档.
flexbox自2009的初次草案开始,已经经历了几次更新和语法修改,为了避免困惑、保证清晰,我们仅仅使用2014年9月最后一次工作草案中的语法。如果您想要实现旧浏览器的兼容,请访问这篇文章寻找最佳实践。
最近的flexbox规范浏览器支持情况如下:
Chrome 29+
Firefox 28+
Internet Explorer 11+
Opera 17+
Safari 6.1+ (prefixed with -webkit-)
Android 4.4+
iOS 7.1+ (prefixed with -webkit-)
您也可以到caniuse了解浏览器兼容情况详情。
本文中的用到的一些术语的表达约定如下
flex-container-弹性容器
flex-item-弹性子元素
main axis-主轴
cross axis-侧轴
2.3 使用
使用flexbox只需要在父元素上设置display属性即可。
如果您想让它以内联方式显示,则
注意:仅仅需要在父元素上设置这一个属性即可,它的子元素会自动变成flex items。
有很多方式分组flexbox的所有属性,我发现最容易理解的方式是分成两组,一组为弹性容器的属性,另一组为弹性子元素的属性,接下来我们按这种方式来一一解析。
2.4 弹性容器(Flex container)属性
2.4.1 flex-direction
该属性通过设置flex container主坐标轴方向影响子元素(flex item)如何在容器中排布。我们可以设置两个主要的方向水平和垂直方向。
可以接受的值有四个row、row-reverse、column、column-reverse,如下所示。
弹性子元素将会按照自左向右的水平排列。
弹性子元素将会自右向左水平排列。
弹性子元素将自上而下竖直排列
弹性子元素将自下而上竖直排列
默认值为row.
2.4.2 flex-wrap
flexbox最初的理念是保持弹性容器的子元素在一行中。flex-wrap属性控制当子元素items超出弹性容器范围是是否换行,以及新行的方向。
本属性可以接受一下几个值:no-wrap、wrap、wrap-reverse,分别如下所示。
弹性子元素将会在一行显示,默认的子元素items将会缩减以适应弹性容器的宽度。
如果需要的话,弹性子元素将会自左向右、自上而下地多行显示。
如果需要的话,弹性子元素将会自左向右、自下而上地多行显示。
默认值为no-wrap.
2.4.3 flex-flow
flex-flow属性是flex-direction和flex-wrap属性的快捷方式,复合属性。
默认值为row nowrap.
2.4.4 justify-content
justify-content设置弹性子元素在弹性容器中当前行主坐标的对齐方式,当弹性容器里一行上的所有子元素都不能伸缩或已经达到其最大值时,该属性可协助对多余的空间进行分配。
可以接受的值为flex-start、flex-end、center、space-between、space-around等五个值,默认值为flex-start。详细如下所示。
您可能关注的文档
最近下载
- 2023压力容器设计审核人员考试题库-1.docx
- 合并肥厚性心肌病的麻醉.pptx VIP
- 小区幼儿园经营管理投标文件.docx
- TSGD7006—2023年压力管道监督检验规则.docx
- 2023年新青岛版(六三制)二年级上册科学全册课件.pptx
- 全国说课比赛一等奖课件.ppt
- 第一单元+史前时期:原始社会与中华文明的起源(单元复习课件)-【大单元教学】2024-2025学年七年级历史上册同步备课系列(统编版2024).pptx VIP
- (完整版)小升初字音、字形、词语练习.pdf VIP
- 【2024秋】人教版三年级语文上册教学工作计划(及进度表).docx
- 护理专业调研报告(高职).docx VIP
文档评论(0)