弹性盒模型Flex指南

Web layout 是Web UI中的基础架构, 重要性不言而喻. 传统的盒模型, 借助display, position, float 属性应对普通布局游刃有余, 但针对复杂的或自适应布局, 经常捉襟见肘. 好比垂直居中, 就是一个老大难的问题, 借助flex弹性盒模型, 两行代码就能够优雅的实现之. (该方法曾在 16种方法实现水平居中垂直居中 一文中提到). 固然, 本次咱们不会只讨论垂直居中的问题, 我将努力尽量的还原flex的应用场景.

原文: 弹性盒模型Flex指南

本文将介绍flex子项目压缩比计算, 多层flex嵌套的常见问题. 通读本文, 你还将了解以下内容:

1. Flex
2. 兼容性
3. Autoprefixer
4. 优点
5. 概念铺垫
6. 属性
   1. 容器属性
   2. 子项目属性
7. flex属性的优先级
8. 场景回顾

Flex

Flex即弹性盒模型, 该布局方案由W3C于2009年提出. 此后, Flex方案便历经v2009, v2011, v2012, v2014, v2015, v2016等版本, 最近方案是2016年5月26日起草的 CSS Flexible Box Layout Module Level 1.

兼容性

首先, 咱们来回顾下现在PC端的兼容性(如下为彻底兼容版本).

IE	Edge	Firefox	Chrome	Safari	Opera
-	12+	28+	21+	6.1+	12.1+

以上, IE10+仅支持2012版W3C的flex语法, 且存在较多已知的bug, 此时使用flex布局需谨慎.

Chrome浏览器v21~v28版本须要添加 "-webkit-" 前缀.

Safari浏览器v6.1~v8版本须要添加 "-webkit-" 前缀.

Opera浏览器v15~v16版本须要添加 "-webkit-" 前缀.

所以, 看到一些sass编译后的css文件中带有 "-webkit-" 前缀无需惊慌.

平时开发时最为担忧的即是移动端兼容性, 请看:

IOS Safari	Opera mini	Android	Android Chrome	UC	微信
7.1+	√	4.4+	55	-	当前支持

微信当前版本已支持flex.

UC不对外提供webview内核, 除去一些H5app的应用, 各类分享页基本(常在微信下打开)基本不须要担忧对其兼容性, 实在须要实现, UC仍是支持老版本的弹性盒子的, 能够优雅降级. 可见, Android4.4以上基本能够安心使用flex.

Autoprefixer

强记各类浏览器的前缀是没有必要的, 由于autoprefixer该作的, 都帮咱们作了. 所以建议尝试下如下三个插件之一.

• grunt-autoprefixer
• gulp-autoprefixer
• PostCSS-autoprefixer

优点

Flex布局使得子项目可以"弹性"的改变其高宽, 自由填充容器剩余空间, 以适应容器变大, 或者压缩子项目自身, 以适应容器变小; 同时还能够方便的调节子项目方向和顺序. flex经常使用于高宽须要自适应, 或子项目大小成比例, 或水平垂直对齐等场景.

概念铺垫

Flex弹性盒模型里, 有容器和项目之分. 设置display:flex的为容器, 容器内的元素称做它的子项目, 容器有容器的一套属性, 子项目有子项目的另外一套属性. (能够这么理解: father做为弹性盒子, 制定行为规范, son享受盒子的便利, 按照规范划分各自的"辖区").

如下图片摘自大漠的一个完整的Flexbox指南文中.

flexbox

father制定的规范, 基于两个方向 — 水平和垂直.

• 水平方向的称之为主轴(main axis), 垂直方向的称之为交叉轴(cross axis).
• 主轴起始位置, 叫作main start, 末尾位置叫作main end;
• 交叉轴起始位置, 叫作cross start, 末尾位置叫作cross end.
• 子项目在主轴上所占的宽(高)度, 叫作main size, 在交叉轴上所占的高(宽)度, 叫作cross size.

属性

display: flex | inline-flex;(元素将升级为弹性盒子). 前者容器升级为块级盒子, 后者容器将升级为行内盒子. 元素采用flex布局之后, 子元素的float, clear, vertical-align属性都将失效.

容器属性

容器具备如下6个属性.

• flex-direction 指定主轴的方向.

flex-direction的值	描述
row(默认)	指定主轴水平, 子项目从左至右排列➜
row-reverse	指定主轴水平, 子项目从右至左排列⬅︎
column	指定主轴垂直, 子项目从上至下排列⬇︎
column-reverse	指定主轴垂直, 子项目从下至上排列⬆︎

• flex-wrap 指定如何换行.

flex-wrap的值	描述
nowrap(默认)	默认不换行
wrap	正常换行
wrap-reverse	换行, 且前面的行在底部

• flex-flow 它是flex-direction 和 flex-wrap的简写形式, 默认值为row nowrap.
• justify-content 指定主轴上子项目的对齐方式.(一般为水平方向对齐方式)

justify-content的值	描述(子项目--主轴方向)
flex-start(默认)	子项目起始位置与main start位置对齐
flex-end	子项目末尾位置与main end位置对齐
center	在主轴方向居中于容器
space-between	与交叉轴两端对齐, 子项目之间的间隔所有相等
space-around	子项目两侧的距离相等, 它们之间的距离两倍于它们与主轴起始或末尾位置的距离.

• align-items 指定交叉轴上子项目的对齐方式.(一般为垂直方向对齐方式)

align-items的值	描述(子项目—交叉轴方向)
flex-start	子项目起始位置与cross start位置对齐
flex-end	子项目末尾位置与cross end位置对齐
center	在交叉轴方向居中于容器
baseline	第一行文字的基线对齐
stretch(默认)	高度未定(或auto)时, 将占满容器的高度

• align-content 指定多根主轴的对齐方式. 若只有一根主轴, 则无效.

align-content的值	描述(子项目)
flex-start	顶部与cross start位置对齐
flex-end	底部与cross end位置对齐
center	在交叉轴方向居中于容器
space-between	与交叉轴两端对齐, 间隔所有相等
space-around	子项目两侧的距离相等, 它们之间的距离两倍于它们与主轴起始或末尾位置的距离.
stretch(默认)	多根主轴上的子项目充满交叉轴

子项目属性

子项目具备如下6个属性.

• flex-grow 指定子项目的放大比例, 默认为0(即不放大). 该属性可取值为任何正整数. 假设各个子项目的放大比例之和为n, 那么容器内剩余的空间将分配n份, 每一个子项目各自分到x/n份. (x为该子项目的放大比例)

• flex-shrink 指定子项目的缩小比例, 默认为1. 设置为0时, 空间不足该子项目将不缩小. 咱们知道, 容器的缩小总宽度=子项目所须要的总宽度-容器实际宽度, 假设容器须要缩小的宽度为W, 某子项目的默认宽度为L, 其缩小比例为p, 那么该子项目实际的宽度为L-p*W.

  • 上面轻描淡写的给出了子项目的缩小比例, 可能会给你一种错觉— "缩小比例很容易计算", 实际上, 咱们在计算元素须要缩小比例时, 老是要考虑到元素自身默认的大小.

  • 假设上述子项目其flex-shrink值为x1, 另外一个子项目的默认宽度为R, flex-shrink值为x2, 考虑到元素自身大小. 最终第一个子项目的缩小比例是加权了自身默认大小后的结果, 即rate = L*x1/(L*x1 + R*x2).

    

  • 为何计算会如此复杂, 如此不直观??? 这是由于, 子项目的大小各不一致, 假如一个子项目是另外一个子项目主轴宽度的9倍, 前者的flex-shrink值为1, 后者为9, 而容器实际上只有他们默认总宽度的一半. 这意味着, 这两个子项目共计要压缩为默认的一半. 若是仅仅按照flex-shrink值来决定比例, 那么第二个子项目须要压缩其默认的9/10, 而咱们知道, 它默认是如此的小, 即便所有压缩了, 也无济于事; 而第一个元素仅须要压缩其默认的1/10, 简直就是九牛一毛, 根本达不到默认总宽度压缩一半的效果. 很明显, 这种压缩比例的分配方式是不合理的. 所以最终的压缩比例加入了默认宽度值(即flex-basis值), 表达式的分子为 flex-shrink * flex-basis, 分母为各子项目 flex-shrink * flex-basis 之和.

• flex-basis 指定子项目分配的默认空间, 默认为auto. 即该子项目的本来大小.

• flex 是 flex-grow, flex-shrink, flex-basis 3个属性的缩写. 默认为0 1 auto. 该属性取值为auto时等同于设置为1 1 auto, 取值为none时等同于设置为0 0 auto.

• align-self 指定单个子项目独立的对齐方式. 默认为auto, 表示继承父元素的align-items属性, 如无父元素, 则等同于stretch. 该属性共有6种值, 其余值与上述align-items属性保持一致.

• order 指定子项目的顺序, 数值越小, 顺序越靠前, 默认为0.

flex属性的优先级

咱们能够给input设置flex:1, 使其充满一行, 而且随着父元素大小变化而变化. 也能够给div设置flex:1使其充满剩余高度.

使用flex布局这些都不是难事, 须要注意的是, 这其中有坑. 为了不踩坑, 咱们先来看下flex属性的优先级:

width|height > 自适应文本内容的宽度或高度 > flex:数值

这意味着, 首先是元素宽高的值优先, 其次是内容的宽高, 再次是flex数值. 如今咱们来看看坑是什么.

1. 给input元素设置flex:1时须要注意, 一般input拥有一个默认宽度(用于展现默认数量的字符), 在chrome v55下, 这个宽度默认为126px(同时还包含2px的border). 所以想要实现input宽度自适应, 能够设置其width为0.
2. 给div元素设置flex:1时, 因div的高度会受子级元素影响, 为了使得该div占满其父元素剩余的高度, 且不超出, 建议将该div的height属性设置为0.

场景回顾

1. 想要实现垂直居中的效果, 只须要设置父元素为display:flex;justify-content:center 便可. (固然, 父元素样式采用:display:table;, 子元素样式采用:display:table-cell;vertical-align:middle 也是能够实现的), 以下图.

   

2. 想要实现左右两个元素等高(父元素高度由子元素撑开), 而且各占一半的宽度. 如上图.

   • 早期的实现方案, 须要借助负margin. 父元素样式设置为overflow:hidden, 子元素样式设置为margin-bottom:-10000px;padding-bottom:10000px;, 这样, 每一个子元素便能借助padding撑开, 同时, 借助负margin和overflow合理裁剪.
   • 第二种方案就是借助IE8都支持的display:table属性, 父元素样式设置为display:table , 子元素设置为display:table-cell. 利用表格的行高一致性, 轻松实现行高一致.
   • 最终, 咱们发现, 仍是flex弹性盒模型来得方便快捷, 它只须要父级元素样式设置为display:flex.

有关flex的旧语法, 请戳这篇回顾 Flex布局新旧混合写法详解（兼容微信） .

有关移动端的最佳实践, 请戳这篇围观 移动端全兼容的flexbox速成班 .

固然, 这里还有一个 Flexbugs 列表, github上已有近6k的star, 感兴趣能够前去看看.

---

本问就讨论这么多内容,你们有什么问题或好的想法欢迎在下方参与留言和评论.

本文做者: louis

本文连接: louiszhai.github.io/2017/01/13/…

参考文章

• CSS Flexible Box Layout Module Level 1
• 2012 CSS Flexible Box Layout Module
• 2009 CSS Flexible Box Layout Module
• Flex 布局教程：语法篇 - 阮一峰的网络日志
• 一个完整的Flexbox指南--大漠