Learning CSS flexbox - what is my course not telling me?

Question

First time on here so forgive me if I ask in the wrong way, or don't quite say things right. I have VERY recently begun to learn HTML5 and CSS , on an online course. Currently studying for MTA exam 98 375. Ive just go onto the section on flexbox, and am struggling. My tutor hasn't really been able to explain whats going wrong. The book gave me this to create a flexbox , and show it displaying horizontally. It will not do so for me but remains vertical :

<!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>

I am on a mac, using most recent Firefox, Opera and safari. Tutor did not seem to understand what the issue was, kept telling me i needed the prefixes (which I used!). The code is eaxctly as in book but result appears differently. Wierdly, after reading a lot online (most of which I didn't understand) I tried changing flexbox to flex (I think that was a suggestion somewhere) as this (the rest of coding stayed the same):

<!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;

and now it looks like the book says it should. BUt - i have to pass an exam and create a portfolio and dont understand what is happening or why. Can anyone help me? Sorry its so long!

Hi VictoriaAndrew wc to stack overflow. Please go through this http://stackoverflow.com/help/how-to-ask — Illegal Argument, Jul 23 '14 at 16:23

Jacob G · Answer 1 · 2014-07-23T16:34:25.293

2

display:flex is the current version of display:flexbox and the older display:box(2009 version). The reason flex worked and flexbox did not is that flexbox was introduced in 2011 and flex is now the standard for browsers. See these links:
http://css-tricks.com/old-flexbox-and-new-flexbox/
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

edited Jul 23 '14 at 16:34

answered Jul 23 '14 at 16:25

Jacob G

13,762
3
47
67

Thank you! That helps. I guess I'll need to know the old way for the exam and the new to make sites that work! Slightly concerned my tutor did not know this... – VictoriaAndrew Jul 24 '14 at 11:54
@VictoriaAndrew , now you can teach your tutor! Glad my answer helped you! – Jacob G Jul 24 '14 at 12:17

score 2 · Accepted Answer · answered Jul 23 '14 at 16:27

The current CSS value definition syntax for CSS Flexible Box Layout's display is (like you figured out) is flex, not flexbox.

Your book suggests flexbox, as at the time of it's release it was the value used in the W3C Working Draft, but is now deprecated.

More so, if you see display: box; suggested somewhere, it's from an even older spec

score 1 · Answer 3 · edited May 23 '17 at 10:29

This link may answer your question it is a SO question along the same lines. It basically comes down to the year/implementation.

quoted from user dTDesign

These are different styles.
display: box; is a version of 2009.
display: flexbox; is a version of 2011.
display: flex; is the actual version.

MDN (Mozilla Developer Network) has a article that helped me wrap my mind around the flexbox, maybe it will help you.

Learning CSS flexbox - what is my course not telling me?

3 Answers3