- 1、本文档共9页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
flex布局全解析解读
HYPERLINK /7z7chn/p/5782273.html flex布局全解析
很长一段时间, 我知道有flex这个布局方式, 但是始终没有去学它. 3点原因:
感觉还比较新, 担心兼容性不好.
普通的布局方式能满足我的绝大多数需求.
好像蛮复杂的.
最近由于开发需要,? HYPERLINK /7z7chn/p/5727245.html 学习了下WeUI的实现, 发现里面大量使用了flex布局, 于是决定学习一下.
什么是flex
Flexbox Layout, 官方名为 HYPERLINK /TR/css-flexbox/ CSS Flexible Box Layout Module, 意为弹性布局, 是CSS3中引入的一种更加灵活高效的布局/对齐/排序方式(还有一种更适合大型布局的网格布局 HYPERLINK /TR/css-grid/ CSS Grid Layout Module).?flex是flexible的缩写.
任何一个容器都可以指定为flex布局。
.box {display: flex;}
行内元素也可以使用flex布局。
.box {display: inline-flex;}
flex的基本概念
采用flex布局的元素被称为flex容器 (flex container), 它的子元素即为flex元素 (flex item).
flex容器中包含两个相互垂直的轴, 即主轴 (main axis)和副轴 (cross axis).
flex元素沿主轴从主轴起点 (main start)到主轴终点 (main end)依次排布.
如果flex容器包含多行flex元素, 则flex行 (flex lines)沿副轴从副轴起点 (cross start)到副轴终点 (cross end)依次排布.
单个flex元素占据的主轴空间叫做主轴长度 (main size), 占据的副轴空间叫做副轴长度 (cross size).
flex的兼容性
HYPERLINK /flexbox-dice Getting Dicey With Flexbox中提到:
Theres a popular myth floating around that flexbox isnt ready for prime time. Wrong!?93% of people are now running a browser that supports flexbox.?Thats better than the support for the HTML5?videoelement.
前一段时间同事做过video相关的开发, 踩到各种坑, 因此我知道video的支持不那么好, 特别是在Android上. 让我惊奇的是flex竟然比video的支持更好?
从 HYPERLINK / \l feat=video CanIUse的数据来看,?flex的支持度是:?82.65% (支持) + 14.17% (部分支持) = 96.81%, 而video的支持度是:?92.48%. 浏览器对flex的支持好像并没有特别好...
但是有微信的WeUI使用了flex布局, 我觉得在移动端flex应该还是支持度比较高的.
所以, 如果你是做移动端开发的, 可以优先考虑flex.
flex属性
下面就开始介绍与flex布局相关的属性. 以作用对象分为两组, 第一组作用于flex容器, 第二组作用于flex元素.
注意:?以下属性值都可以有initial(该属性的默认值)和inherit(继承自父元素), 本处省略.
用于flex容器的属性
这类属性有6种, 分别为:
属性 含义 flex-direction 主轴方向 flex-wrap 换行样式 flex-flow 前两个的简写形式 justify-content 主轴对齐方式 align-items 单行的副轴对齐方式 align-content 多行的副轴对齐方式 注意:
flex容器的column-*属性会失效.
flex容器无法拥有::first-line和::first-letter虚元素.
flex-direction
含义 主轴方向 可选值 row | row-reverse | column | column-reverse 默认值 row row direction为ltr时从左向右→,?rtl时从右向左←. row-reverse direction为ltr时从右向左←,?rtl时从左向右→. column 从上到下↓. column-reverse 从下到上↑. 注意:?row和row-reverse受到了direction属性(默
您可能关注的文档
- 新员工法律培训讲述.ppt
- 天诚智能集团智慧社区业务介绍精要.ppt
- 新员工入厂安全教育讲述.ppt
- FC2000流量计算机中文PPT解读.ppt
- 天运团队建设与管理精要.ppt
- 太原学院计算机工程系课程设计报告李东峻精要.doc
- F00000607_1承压类特种设备基础知识-09能力培训解读.ppt
- 新员工安全培训教材工伤预防讲述.ppt
- 太原南内环街酒式公寓项目精要.doc
- 新员工试用期考核流程讲述.docx
- 国际标准 IEC 61169-47:2015 EN Radio-frequency connectors - Part 47: Sectional specification for radio-frequency coaxial connectors with clamp coupling, typically for use in 75 Ω cable networks (type F-Quick) 无线电频率连接器 - 第47部分:用于无线电频率同轴连接器的部分规范,.pdf
- 国际标准 IEC 61158-5-17:2007 EN 工业通信网络 - 现场总线规范 - 第5-17部分:应用层服务定义 - 类型17元素 Industrial communication networks - Fieldbus specifications - Part 5-17: Application layer service definition - Type 17 elements.pdf
- 国际标准 IEC 61158-5-17:2007 EN Industrial communication networks - Fieldbus specifications - Part 5-17: Application layer service definition - Type 17 elements 工业通信网络 - 现场总线规范 - 第5-17部分:应用层服务定义 - 类型17元素.pdf
- 国际标准 IEC 60939-2-2:2004 EN_D 完整抑制无线电干扰滤波器单元-第2-2部分:空白详细规范-用于抑制电磁干扰的被动滤波器单元-仅需进行安全测试的滤波器(安全测试) Complete filter units for radio interference suppression - Part 2-2: Blank detail specification - Passive filter uits for electromagnetic interference .pdf
- 国际标准 IEC 60939-2-2:2004 EN_D Complete filter units for radio interference suppression - Part 2-2: Blank detail specification - Passive filter uits for electromagnetic interference suppression - Filters for which safety tests are required (safety.pdf
- 国际标准 IEC 60670-23:2006 EN-FR Boxes and enclosures for electrical accessories for household and similar fixed electrical installations - Part 23: Particular requirements for floor boxes and enclosures 家用和类似固定电气安装用电器配件的盒子与封闭装置——第23部分:地板箱和封闭装置的要求.pdf
- 国际标准 IEC 60670-23:2006 EN-FR 家用和类似固定电气安装用电器配件的盒子与封闭装置——第23部分:地板箱和封闭装置的要求 Boxes and enclosures for electrical accessories for household and similar fixed electrical installations - Part 23: Particular requirements for floor boxes and enclosures.pdf
- 2024版完整的货物运输合同书.doc
- 2024版无财产的离婚协议书书模板.doc
- 2024版委托融资租赁合同书书.doc
文档评论(0)