-webkit-FLEX.
使用flex代替普通div方法和媒体标签来实现响应式样式的唯一优势是什么？
我几乎没有看到任何使用flex进行响应的网站.
解决方法
I had hardly seen any site using flex for responsiveness.
来自CanIUse的Source
CSS Flexible Boxes Layout specification is at the Candidate
Recommendation stage,not all browsers have implemented it. WebKit
implementation must be prefixed with -webkit; Internet Explorer
implements an old version of the spec,prefixed; Opera 12.10
implements the latest version of the spec,unprefixed. See the
compatibility table on each property for an up-to-date compatibility
status.
Flex Box
新的flexBox布局模式准备重新定义我们如何在CSS中进行布局.不幸的是,规范最近发生了很大的变化,因此它在不同的浏览器中的实现方式不同.有很多过时的flexBox资源.
>可以沿任何流动方向布置(向左,向右,向下,甚至向上！)
>可以在样式层中反转或重新排列显示顺序(即,视觉顺序可以独立于源和语音顺序)
>可以沿单个(主)轴线性布局,或沿二级(交叉)轴包裹成多条线
>可以“弯曲”它们的尺寸以响应可用空间
>可以相对于容器或彼此对齐
>可以沿主轴动态折叠或展开,同时保留容器的十字尺寸.
旧箱模型的问题
请考虑以下代码以使用三列布局.
.col {
width: 33.33%;
padding: 0 5%;
}
这实际上不会为您提供33.33％宽的列,它将创建43.33％宽的列.这将打破3列布局,因为列的组合宽度超过100％.换句话说,填充被添加到已存在的宽度.所以这是填充宽度.
如果需要创建3列布局,通常使用float(或inline-block),然后计算出必要的宽度,填充和边距,使它们适合父容器.即使它现在已经成为第二天性,这是一项不必要的工作,它应该是很好的避免.
CanIUse的已知问题
> Firefox不支持以百分比指定宽度. See bug.
>截至2013年9月,根据草案规范,IE10和IE11的默认值为0 0 auto(see here)而不是0 1 auto.
> Firefox不支持flex-wrap,align-content属性. See bug
>在IE10和IE11中,如果容器具有最小高度但没有明确的高度属性,则具有display：flex和flex-direction：column的容器将无法正确计算其弯曲的子尺寸. See bug.
>在Chrome和Safari中,(非弯曲)儿童的高度无法以百分比形式识别.但Firefox和IE会根据百分比高度识别和缩放子项.
参考
> Editor’s Draft
> Dive into Flexbox
> Flexbox Tutorial 2013 (Updated 2013)
> Guide to flexbox
