当我读到有关HTML和CSS的新变化时，我开始了解像-webkit-flex
使用flex而不是普通的div方法的唯一优势是什么，媒体标签可以提供响应风格。
我几乎没有看到任何网站使用flex进行响应。
最佳答案
我几乎没有看到任何网站使用flex进行响应。
Source来自犬类
CSS柔性箱布局规范可供选择。
推荐阶段，并不是所有浏览器都实现了它。WebKIT
实现必须以-WebKit；Internet Explorer作为前缀
实现规范的旧版本，前缀为；opera 12.10
实现规范的最新版本，未修复。查看
每个属性上的兼容性表以获得最新的兼容性
状态。
伸缩箱
新的flexbox布局模式准备重新定义我们如何在CSS中进行布局。不幸的是，规范最近发生了很大的变化，所以它在不同的浏览器中实现的不同。周围有很多过时的flexbox资源。
flexbox有许多令人兴奋的功能，因为它
可按任意流向布置（向左、向右、向下，甚至向上！）
可以在样式层颠倒或重新排列显示顺序（即，可视顺序可以独立于源顺序和语音顺序）
可以沿单个（主）轴线性布置，也可以沿辅助（交叉）轴缠绕成多条线。
可以“伸缩”大小以响应可用空间
可以与其容器或彼此对齐
可以沿主轴动态折叠或不折叠，同时保留容器的交叉大小。
旧盒子模型的问题
考虑以下代码用于三列布局。
.col {
width: 33.33%;
padding: 0 5%;
}
这实际上不会给您提供
33.33% wide的列，它将创建43.33% wide.的列，这将中断3列布局，因为列的组合宽度超过100%。换句话说，填充被添加到已经存在的宽度中。所以是填充+宽度。如果需要创建3列布局，通常使用浮动（或内联块），然后计算出必要的宽度、填充和边距，以便它们适合父容器。这是一项不必要的工作，最好避免，即使它已经成为第二天性。
我找到了一个很好的关于flexboxhere实现现状的教程。
犬类已知问题
火狐不支持以百分比指定宽度。See bug
截至2013年9月，根据规范草案，IE10和IE11的默认值是
flex（see here）而不是0 0 auto。火狐不支持flex-wrap，内容属性对齐。See bug
在IE10和IE11中，如果容器具有
0 1 auto但没有显式的display: flex属性，则具有flex-direction: column和min-height的容器将无法正确计算其弯曲儿童的大小。See bug在Chrome和Safari中，（非弹性）儿童的身高不以百分比表示。然而，火狐和IE根据百分比高度识别和缩放孩子们。
工具书类
Editor's Draft
Dive into Flexbox
Flexbox Tutorial 2013 (Updated 2013)
Guide to flexbox