html - 在 CSS 中使用 flex 样式的主要优点是什么？

Question

当我阅读 HTML 和 CSS 的新变化时，我开始了解 flex 样式，例如-webkit-flex.

使用 flex 而不是带有媒体标签的普通 div 方法来实现响应式样式的唯一优势是什么。

我几乎没见过任何网站使用 flex 来实现响应。

Answer 1

I had hardly seen any site using flex for responsiveness.

Source来自 CanIUse

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 盒子

新的 flexbox 布局模式准备重新定义我们在 CSS 中进行布局的方式。不幸的是，规范最近发生了很大变化，因此它在不同浏览器中的实现方式有所不同。周围有很多过时的 flexbox 资源。

Flexbox 有许多令人兴奋的特性，因为它

• 可以按任何流向(向左、向右、向下，甚至向上!)布置
• 可以在样式层反转或重新排列显示顺序(即，视觉顺序可以独立于源和语音顺序)
• 可以沿单个(主)轴线性布置，也可以沿副(交叉)轴包裹成多条线
• 可以根据可用空间“调整”尺寸
• 可以相对于容器或彼此对齐
• 可以沿主轴动态折叠或展开，同时保持容器的横向尺寸。

旧盒子模型的问题

考虑以下用于三列布局的代码。

.col {
    width: 33.33%;
    padding: 0 5%;
}

这实际上不会为您提供 33.33% 宽 的列，它会创建 43.33% 宽的列。 这将打破 3 列布局，因为列的组合宽度超过 100%。换句话说，填充被添加到已经存在的宽度。所以它是内边距 + 宽度。

如果您需要创建一个 3 列布局，您通常使用 float (或内联 block )，然后计算出必要的宽度、填充和边距，以便它们适合父容器。最好避免这种不必要的工作量，即使它现在已经成为第二天性。

我找到了一个关于Flexbox实现现状的好教程here .

CanIUse 的已知问题

• Firefox 不支持以百分比指定宽度。 See bug .
• flex 的 IE10 和 IE11 默认值为 0 0 auto ( see here ) 而不是 0 1 auto，根据草案规范，截至 2013 年 9 月。
• Firefox 不支持 flex-wrap、align-content 属性。 See bug
• 在 IE10 和 IE11 中，如果容器具有 min -height 但没有明确的 height 属性。 See bug .
• 在 Chrome 和 Safari 中，(非 flex) child 的高度无法以百分比形式识别。但是，Firefox 和 IE 会根据百分比高度识别和缩放 child 。

引用资料

1. Editor's Draft

2. Dive into Flexbox

3. Flexbox Tutorial 2013 (Updated 2013)

4. Guide to flexbox