在CSS中使用flex样式有哪些主要优点？
当我读到关于HTML和CSS的新变化时,我开始了解类似的flex样式
-webkit-flex.
使用flex而不是普通div方法和媒体标签来响应风格的唯一优势是什么.
我几乎没有看到任何使用flex进行响应的网站.
我几乎没有看到任何使用flex进行响应的网站.
来自CanIUse的消息来源
CSS Flexible Boxes布局规范处于候选推荐阶段,并非所有浏览器都实现了它.WebKit实现必须以-webkit为前缀; Internet Explorer实现了旧版本的规范,前缀为; Opera 12.10实现了最新版本的规范,没有前缀.有关最新的兼容性状态,请参阅每个属性的兼容性表.
Flex Box
新的flexbox布局模式准备重新定义我们在CSS中进行布局的方式.不幸的是,规范最近发生了很大的变化,因此它在不同的浏览器中的实现方式不同.有很多过时的flexbox资源.
Flexbox有许多令人兴奋的功能,因为它
- 可以沿任何流动方向布置(向左,向右,向下,甚至向上!)
- 可以在样式层中反转或重新排列显示顺序(即,视觉顺序可以独立于源和语音顺序)
- 可沿单个(主)轴线性布置或沿二级(交叉)轴包裹成多条线
- 可以"弯曲"它们的尺寸以响应可用空间
- 可以相对于他们的容器或彼此对齐
- 可以沿主轴动态折叠或不折叠,同时保留容器的交叉大小.
旧箱子模型的问题
请考虑以下代码以使用三列布局.
.col {
width: 33.33%;
padding: 0 5%;
}
这实际上不会为您提供列,33.33% wide它将创建列,43.33% wide.这将打破3列布局,因为列的组合宽度超过100%.换句话说,填充被添加到已经存在的宽度.所以它是填充+宽度.
如果需要创建3列布局,通常使用float(或inline-block),然后计算出必要的宽度,填充和边距,以便它们适合父容器.即使它现在已经成为第二天性,这是一项不必要的工作,它可以避免.
我发现了一个很好的教程Flexbox,就实施的当前状态在这里.
CanIUse的已知问题
- Firefox不支持以百分比指定宽度.看错误.
- IE10和IE11的默认值
flex是0 0 auto(见此处),而不是0 1 auto根据草案规范,截至2013年9月. - Firefox不支持flex-wrap,align-content属性.看错误
- 在IE10和IE11中,如果容器具有但没有明确的属性,则容器具有
display: flex并且flex-direction: column将不会正确计算其弯曲的子尺寸.看错误.min-heightheight - 在Chrome和Safari中,(非弹性)儿童的高度无法以百分比形式识别.但Firefox和IE会根据百分比高度识别和缩放子项.
参考
什么是弹性盒？
\n\nW3C 规范中所述的 Flexbox 定义：
\n\n\n\n\n该规范描述了针对用户界面设计优化的 CSS 盒模型。在弹性布局模型中，弹性容器的子容器可以在任何方向上布局，并且可以“调整”它们的大小，要么增大以填充未使用的空间，要么缩小以避免溢出父容器。子级的水平和垂直对齐都可以轻松操纵。这些框的嵌套（水平嵌套垂直，或垂直嵌套水平）可用于构建二维布局。
\n
值得注意的是，flexbox 不仅仅是一个属性，而是整个模块，具有一组属性，一旦被定义为 Flex 容器，这些属性就会影响父元素（通常是某种包装 div）内部元素的流动和定位。这是通过使用 来完成的display: flex。
Flexbox 上的资源：
\n\n\n\n优点
\n\nFlebox 允许我们在更改屏幕尺寸或设备方向时更好地控制盒子/div/页面元素的对齐和行为。
\n\n没有flexbox，实现灵活布局的方法有：
\n\n- \n
floats - 基本上是一种 hack，因为它的原始用途是允许部分内容更改位置，而不将它们从文档流中删除（即在文本周围放置图像）。它们主要用于水平堆叠，通常与媒体查询和
clearfix黑客结合使用。 \n用于调整大小的相对单位（% 或 em） - 在大多数情况下适用于水平布局，但不提供或很少提供垂直对齐控制。
\n媒体查询- 与上层技术 MQ 结合使用，成为 RWD 的主要内容，但在更复杂的情况下往往会变得混乱，因为每个查询都必须包含影响我们要调整的元素的大小和位置的所有属性（宽度、高度、填充、边距） 、显示等）。
\njavascript - 根据其他变量动态更改元素属性。这也是hacky解决方案，通常不是很干净，对页面大小和性能造成负担，并且明显依赖于JS。
\n
Flexbox 在某种程度上是上面列出的方法的“速记”组合，但也具有三个独特的优点：
\n\n- \n
- 根据可用空间设置元素的灵活宽度/高度 \n
- 垂直和水平居中，无需任何技巧和解决方案 \n
- 改变布局内元素的顺序而不影响标记和文档结构（使用
order属性或flex-flow）。 \n
有关更具体的示例，请查看本答案末尾列出的链接。
\n\n语法和浏览器支持
\n\n随着时间的推移，各种浏览器之间的 Flexbox 语法发生了一些重大变化，这些变化在本文中得到了很好的解释，但是随着像autoprefixer这样的前缀工具的广泛采用，我们可以坚持使用最新的标准语法并自动添加前缀（autoprefixer 提供了定义如何添加前缀的选项）很早以前我们就想讨论浏览器支持）。
\n\n也就是说，除了 IE 9 及更低版本之外，所有主要浏览器都支持 Flexbox。Opera 从 12.1 版本开始支持 Flexbox，但不支持 Opera Mini（令人震惊）。对于许多现有网站来说，使用 Flexbox 可能意味着做大量的工作，但收益有限，但随着 IE 8 和 9 使用率的下降，Flexbox 的实现将会增长。
\n\n何时以及如何使用？
\n\n正如本文中所指出的，flexbox 并不意味着用于创建完整的页面布局（为此目的，目前有css 网格模块正在运行并且很有趣，仅受 IE 支持），而是用于操作较小的单个组件，例如导航和侧边栏元素。
\n\n现在，您可能可以通过现代化器检测支持并回退 IE lte 9，或者通过坚持通用工作基础并扩展它们以在可以处理它的浏览器上提供更好的体验来回退优先（我建议后者）。与往常一样，是否使用 Flexbox 将取决于具体的项目要求和访客资料。
\n\n使用示例
\n\n我没有任何使用 Flexbox 的现实生活示例，但这里有一些使用 Flexbox 可以轻松解决的用例的链接：
\n\n- \n
- \n
- \n
- \n
- \n
- \n