CODEWITHSUNDEEP
csshtmlflexbox
VictoriaAndrew
VictoriaAndrew

Reputation: 3

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

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;

Upvotes: 0

Views: 283

Answers (3)

user3862271
user3862271

Reputation: 44

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.

Upvotes: 1

Jacob G
Jacob G

Reputation: 14172

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/

Upvotes: 2

Pete TNT
Pete TNT

Reputation: 8403

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

Upvotes: 2

Related Questions