学习 CSS flexbox - 我的课程没有告诉我什么？答案

【问题标题】：Learning CSS flexbox - what is my course not telling me?学习 CSS flexbox - 我的课程没有告诉我什么？
【发布时间】：2014-09-14 22:45:38
【问题描述】：

第一次来这里，如果我问错了，或者说的不太对，请原谅我。我最近开始在线学习 HTML5 和 CSS 。目前正在为 MTA 考试 98 375 学习。我刚刚进入关于 flexbox 的部分，并且正在苦苦挣扎。我的导师真的无法解释出了什么问题。这本书给了我这个来创建一个 flexbox ，并显示它水平显示。它不会对我这样做，但会保持垂直：

<!DOCTYPE html>
<html>
<head>
    <title>FLex Function Example</title>
    <style>
        div {
            display: flexbox;
            display: -ms-flexbox;
            display: -moz-flexbox;
            display: -o-flexbox;
            display: -webkit-flexbox;
            flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            -moz-flex-wrap: wrap;
            -o-flex-wrap: wrap;
            -webkit-flex-wrap: wrap;
            height: 200px;
            padding: 1em;
            color: white;
            outline: 2px solid silver;
        }

            div>div {
                width: 75px;
                width: -ms-flex(1 75px);
                width: -moz-flex(1 75px);
                width: -o-flex(1 75px);
                width: -webkit-flex(1 75px);
                margin: 1em;
                height: 100px;
                background-color: #b200ff;
                font-family: sans-serif;
                text-align: center;
                line-height: 100px;
                font-size:large;
            }

    </style>
</head>
<body>
<div>
<div>Service 1</div>

<div>Service 2</div>
<div>Service 3</div>
</div>
</body>
</html>

我在 Mac 上，使用最新的 Firefox、Opera 和 safari。导师似乎不明白问题是什么，一直告诉我我需要前缀（我用过！）。代码与书中的代码完全相同，但结果看起来不同。奇怪的是，在网上阅读了很多内容（其中大部分我不明白）之后，我尝试将 flexbox 更改为 flex（我认为这是某个地方的建议），因为这样（其余的编码保持不变）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Flex function Example</title>
    <style>
        div {
        display:flex;
        display:-ms-flex;
        display:-moz-flex;
        display:-o-flex;
        display:-webkit-flex;

        flex-wrap:wrap;
        -ms-flex-wrap:wrap;
        -moz-flex-wrap:wrap;
        -o-flex-wrap:wrap;
        -webkit-flex-wrap:wrap;

现在看起来书上说应该这样做。 BUt - 我必须通过考试并创建一个投资组合，但不明白发生了什么或为什么。谁能帮我？抱歉，拖了这么久！

【问题讨论】：

嗨 VictoriaAndrew wc 堆栈溢出。请通过这个stackoverflow.com/help/how-to-ask

标签： css html flexbox

【解决方案1】：

CSS Flexible Box Layout's display 的 current CSS value definition syntax 是（如您所想）是 flex，而不是 flexbox。

您的书建议使用flexbox，因为它在发布时是W3C Working Draft 中使用的值，但现在已弃用。

更重要的是，如果您在某处看到建议的 display: box;，它来自 even older spec

【讨论】：

【解决方案2】：

display:flex 是display:flexbox 的当前版本和较旧的display:box（2009 版本）。 flex 有效而 flexbox 无效的原因是 flexbox 是在 2011 年推出的，而 flex 现在是浏览器的标准。查看这些链接：
http://css-tricks.com/old-flexbox-and-new-flexbox/
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

谢谢！这有帮助。我想我需要知道考试的旧方法和制作网站的新方法！有点担心我的导师不知道这个......
@VictoriaAndrew ，现在你可以教你的导师了！很高兴我的回答对您有所帮助！

【解决方案3】：

这个link 可能会回答你的问题，这是一个同样的问题。它基本上归结为年份/实施。

引自用户 dTDesign

这些是不同的样式。
display: box; 是 2009 版本。
display: flexbox; 是 2011 版本。
display: flex; 是实际版本。

MDN（Mozilla 开发者网络）有一个 article 帮助我围绕 flexbox 进行思考，也许它会对你有所帮助。

【讨论】：