Source

Question

当我读到关于HTML和CSS的新变化时，我开始了解像 -webkit-flex。

使用flex代替普通div方法以及响应式样式的媒体标记，唯一的优势是什么？

我几乎没有看到任何使用flex进行响应的网站。

Answer 1

我几乎没有看到任何使用flex进行响应的网站。

enter image description here

来自CanIUse的

Source

CSS灵活盒子布局规范在候选人推荐阶段，并非所有浏览器都实现了它。 WebKit的实现必须以-webkit为前缀; IE浏览器实现旧版本的规范，前缀;歌剧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 here实施现状的好教程。

CanIUse

的已知问题

Firefox不支持以百分比指定宽度。 See bug。
截至2013年9月，根据规范草案，flex的IE10和IE11默认值为0 0 auto（see here）而不是0 1 auto。
Firefox不支持flex-wrap，align-content属性。 See bug
在IE10和IE11中，display: flex和flex-direction: column的容器无法正确计算其弯曲的儿童＆＃39;如果容器具有min-height但没有明确的height属性，则为size。 See bug。
在Chrome和Safari中，（非弯曲）儿童的高度无法以百分比形式识别。但Firefox和IE会根据百分比高度识别和缩放子项。

参考

Answer 2

什么是flexbox？

W3C specs中所述的Flexbox定义：

该规范描述了针对用户界面设计优化的CSS盒模型。在flex布局模型中，flex容器的子节点可以在任何方向布局，并且可以“弯曲”它们的大小，要么增长以填充未使用的空间，要么缩小以避免溢出父节点。可以容易地操纵儿童的水平和垂直对齐。这些框的嵌套（水平内部垂直或垂直内部水平）可用于构建二维布局。

值得注意的是，flexbox不仅仅是一个属性，而是具有一组属性的整个模块，一旦定义为flex容器，就会影响父元素（通常是某种包装div）内元素的流动和定位。这是通过使用display: flex完成的。

enter image description here

有关flexbox的资源：

优点

Flebox允许我们在更改屏幕尺寸或设备方向时更好地控制box / div / page元素的对齐和行为。

没有flexbox，实现灵活布局的方法是：

浮动 - 基本上是黑客攻击，因为它的原始用途是允许部分内容更改位置而不将其从文档流中移除（即，在文本周围定位图像）。它们主要用于水平堆叠，通常与媒体查询和clearfix黑客一起使用。
用于调整大小的相对单位（％或em） - 在大多数情况下适用于水平布局，但对垂直对齐没有或几乎没有控制。
媒体查询 - 与上层技术结合使用MQ制作RWD的主要内容但在更复杂的情况下往往会变得混乱，因为每个查询都必须包含影响大小和位置的所有属性我们想要调整的元素（宽度，高度，填充，边距，显示等）。
javascript - 根据其他变量动态更改元素属性。也是hacky解决方案，通常不是很干净，对页面大小和性能造成负担，而且依赖于JS依赖。

Flexbox在某种程度上是上述方法的“简化”组合，但也具有三个独特优势：

根据可用空间设置元素的灵活宽度/高度
垂直和水平居中，没有任何黑客和解决方案
在不影响标记和文档结构的情况下更改布局内元素的顺序（使用order属性或flex-flow）。

有关更具体的示例，请查看本答案末尾列出的链接。

语法和浏览器支持

随着时间的推移，各种浏览器中的flexbox语法发生了一些重大变化，这些变化在this article中得到了很好的解释，但是广泛采用autoprefixer等前缀工具，我们可以坚持使用最新的标准语法并自动化前缀（autoprefixer提供了一个选项，用于定义我们希望在浏览器支持方面走多远）。

也就是说，除IE 9及更低版本外，所有主流浏览器都支持flexbox。 Opera从版本12.1开始支持flexbox，并且不支持Opera Mini（令人震惊）。对于许多现有站点，使用flexbox可能意味着大量工作以获得有限的好处，但随着IE 8和9的使用下降，Flexbox实现将会增长。

何时以及如何使用？

正如所指出的那样in this article flexbox并不打算用于创建完整的页面布局（对于那种purpuse，目前有css grid模块正在运行且足够有趣，仅由IE支持）但是操纵较小的单个组件，如导航和侧边栏元素。

现在你可以通过现代化程序来检测支持并为IE lte 9做回退或者通过坚持普遍的工作基础来进行回退 - 并扩展它们以便在可以处理它的浏览器上提供更好的体验（我会建议后者）。与往常一样，它将取决于具体的项目要求和访客配置文件应该使用flexbox或不。

用法示例

我没有使用flexbox的任何实际例子，但是这里有一些使用flexbox可以轻松解决的用例链接：

Answer 3

FlexBox的最大或最大优势是灵活性以及浏览器将通过简单易用的设置或编码为我们计算大部分内容的事实。

今天大多数网站使用float进行设计，但这实际上只是一个黑客攻击，因为浮动应该只是一种通过文本环绕图像的方式，就像任何报纸一样。但我们认为它是规则，这变得很正常。就像网页设计师使用桌子进行设计一样;它不应该是那样的。

使用FlexBox，您可以轻松地“实际”执行 Faux Columns ，您可以设置一个（或多个）固定列，另一个（或更多）灵活，而不会使用像溢出一样的黑客 - 浮动组合-it非常好地处理可用空间 - 您可以通过更改数字来重新排列元素的顺序 - 这将非常酷且与RWD结合使用，甚至可以在不使用针对不同场景（display:inline-block，float＆amp; translate等）的大量黑客攻击。

因此，我们最终无法做到新的事情，因为我们多年来已经找到了很多方法来处理/破解我们的需求，但是使用FlexBox 我们将拥有一个特定的工具以适当的方式完成大部分生病技术。我想一个很好的例子就是我们在过去的圆角中用四个div做了什么，今天我们只使用border-radius。所以，最后，我们节省时间并获得更清晰的代码。

我想（希望？）今年我们将看到FlexBox使用的重要增加，因为 XP 的结尾就在这里，IE8将会死 - 而且我认为用户将升级到IE10 / 11的另一个Windows版本。

Answer 4

我会说灵活盒布局模块的主要优点是它可以为您计算一切。您不需要计算元素占用多少空间，边距，填充等。它会自动完成。

Answer 5

非常适合在电子商务网站或基于书店等产品的网站上市。让我们假设您的产品有600x600像素的显示区域。由于产品图像在内部，水平或垂直，每个产品盒都具有动态宽度。 Flex可以很好地安排这些盒子，它不会在下方安装盒子并安排剩余的盒子宽度和高度。

对于浏览器支持，w3schools州

只有Opera支持box-flex属性。

Internet Explorer 10支持替代的-ms-flex属性。

Firefox支持另一种方法-moz-box-flex属性。

Safari和Chrome支持另一种选择-webkit-box-flex   属性。

注意：Internet Explorer 9和Internet不支持灵活的框   早期版本。

Answer 6

标准用户界面组件集
远程处理（通过传输与Web服务连接的能力）打字的对象）
更好的皮肤和样式工作流程（当时比HTML / CSS）
用于数据可视化的高效矢量图形（图表，图形，等）

Answer 7

我经历了一些帖子，我的选择是“使用Flexbox”，来自Chris Coyier的CSS-Tricks。 http://css-tricks.com/using-flexbox/ 本文详细介绍了为使Flexbox在尽可能多的浏览器中运行所需要做的准确工作。在浏览器支持子标题下，它为我们提供了支持的浏览器列表，显然，需要注意的是，“如果你做了所有这些编织，你就可以得到”：

铬火狐苹果浏览器歌剧（12.1+） IE（10+） iOS版的Android

如果我们要为不支持Flexbox的浏览器构建布局，我们必须按照以前的方式来满足它们的需求。从技术上讲，这就是我们目前的做法：使用百分比，ems和浮点数与媒体查询相结合，创建灵活的布局，适用于多种设备，不仅包括我们今天使用的智能手机和平板电脑。

在CSS中使用flex样式有哪些主要优点？

7 个答案:

Source

Flex Box

CanIUse

参考

什么是flexbox？

优点

语法和浏览器支持

何时以及如何使用？

用法示例