fle布局全解析.docVIP

flex布甸全解析 很氐一段时间，我知道轲flex这个布局万式.但足始终没有去学它.3点原W: 1 ? 感觉还比较新.扪心旅容忭不好. 件通的布局式能满足我的绝人多数芯求. 好像苽疑杂的. fit近ih于开发祐要.7 a! r卜WeUI的么:Jk,发现里血大1iH史用了 flex布仇于是决定学?下. 什么是flex ?1 exbox Layout, g方名为CSS Flexible Box Layout Module,意为弹性布问，足CSS3屮引入的一种史加犮活岛效的布问/对齐/神序方式(还有叫中史适合大型布问 的网格布局 CSS Grid Layout Module)? flex 足 flexible 的縮写. 任何?个容器都耐以柑定为flex布周. .box {display： flex；} 行内元泶也可以使用flex布局. .box {display： inline-flex；） flex的基本概念 采川flex也周的元莱被称为flex容器(flex container),它的子元识即为flex元岽(flex item). flex容器中包含两个相1￡垂白;的轴,即主轴(main axis〉和副轴(cross axis). flex儿疾沿V?紬从主轴起点(main start〉到主轴终点(main end)说次 如果flex容器包含多行flex兀索,则flex行(flex lines〉沿tt.轴从朗轴起点(cross start〉到朗轴终点(cross end)依次神布. 中个flex元紊占据的主轴中间叫做主解长度(main size).占据的副轴中间叫做副轴长皮(cross size). flex的兼容忤 Gettina Dicey With Flexbox 中捉到： There9s a popular myth floating around thdt f!exbox isn * t ready for printe 幻ong! 93% of people are now running a browser that supports flexbox. That’s better than the support for the HTUL5 videocJe.^nt. 前?段时间冋银做过video相关的开发，踩到各种坑，因此我知道video的支待不那么好，特别足在Android I:.让我惊奇的flex克然比video的支持更好？ 从CanlUse的敢据來肴.flex的支持汝始：82.6S% （支持）? 14.17% （部分支持 =96.81%,而video的支持坆圮：92.48L浏览器对flex的支待好像讣没存特 别好… 但足有傚佶的WeUI使用了 flex布尚.我觉得在移动铂flex应该还圮支持度比较典的. 所以，如果你足做移动锎好发的，可以优先考虑flex. flex属性 F面就开始介绍与flex布局相关的尿性.以作州对象分为两组，第?组作用子flex容器，第.组作用子flex元索. 注意：以下15｛什.但?可以耵initial（该F4fl的狀认位）和inherit（淋承自父元疾〉，本处竹格. 用于flex容器的《性 这类.W性ft 6种，分別为: 调性 含义 flex-direction 主轴向 flex-wrap 换行样式 flex-flow 前两个的简写形戏 justify-content 主轴对齐方式 align-items 单行的副轴对齐方式 align-content 多行的W1轴利齐方式  注意: flex 存器的column- *屈性会失效. flGX 容器尤法拥析：：first-line 和：：first-letter 後兀索? flex direction 含义 主轴方向 可选伯 row | row-reverse | column | column-reverse 驮认值 row row direction 为 ltr 吋从4!向右一. rtl吋从右向左一. row-reverse direction 为 ltr Bj从右向Ai*-, rtl吋从左向右 column 从上到下I. column-reverse 从下到上f. 注意：row和row-reverse受到了 direction W性（耿认fft为ltr,叫改为rtl〉的影响. flex wrap 岔义 换行样式 可选值 nowrap | | wrap | wrap-reverse 驮认值 nowrap nowrap 不換行 wrap 换行. 行与行从上到下l排布 wrap-reverse 斷. 行与行从下到h丨肺 flex flow IV义 flex-direction 和 flex-wrap 的筋写形式 justify con