Question

第一次来这里，如果我以错误的方式提问，或者说不对，那么请原谅我。我最近开始在线课程学习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 - 我必须通过考试并创建一个投资组合，不知道发生了什么或为什么。谁能帮我？对不起，这么久！

Answer 1

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/

Answer 2

current CSS value definition syntax display的{{3}}（如您所知）是flex，而不是flexbox。

您的图书建议使用flexbox，因为它在发布时它是CSS Flexible Box Layout's中使用的值，但现已弃用。

更重要的是，如果您在某处看到display: box;建议，则来自W3C Working Draft

Answer 3

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

引自用户dTDesign

这些是不同的风格 display: box;是2009年的版本 display: flexbox;是2011年的版本 display: flex;是实际版本。

MDN（Mozilla开发者网络）有一个article帮助我围绕Flexbox，也许它会帮助你。

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

3 个答案: