Flexbox- attributes seem to get ignored. - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Flexbox- attributes seem to get ignored.

readit

10:22 pm on Sep 21, 2012 (gmt 0)

10+ Year Member

I have to admit I am new to the matter.

I tried to apply the new flexbox display method. As far as I understood, it is initiated by setting the display-attribute to

display: box;

.
However, Chrome does not seem to recognize this. It is clear by looking at the result that the boxes are not aligned and expanded as they should be.

When checking with the developer tools (or with firebug in firefox), the code segments corresponding to the flexbox design are marked as error.

I don't understand what I am doing wrong. Both chrome and firefox should support flexbox.

I would be greatful if somebody could give me a hint about what I am doing wrong.

<!doctype html>
<html>
<head>
<style>

#center_body{
width: 940px;
display: box;
box-orient: horizontal;
box-pack: center;
margin-left: auto;
margin-right: auto;
background-color: grey;
}
#left_side {
width:40%;
display: inline-block;
box-flex: 1;
}
#right_side{
display: inline-block;
 width: 40%;
box-flex: 1;
}

</style>
</head>
<body>
<section id=center_body>
<section id="left_side"> this is the left side</section>
<section id="right_side">this is the right side</section>
</section>
</body>
</html>

Thanks :)

rainborick

1:31 am on Sep 22, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

You probably need to use the vendor-specific versions of the flexbox properties, (ie. '-moz', '-webkit').

Paul_o_b

5:24 pm on Sep 22, 2012 (gmt 0)

10+ Year Member

Yes I don't think any browsers support this without the vendor prefix.

You can always check for support at caniuse.com to see what browsers support the property and whether they need the vendor extension.

readit

2:03 am on Sep 23, 2012 (gmt 0)

10+ Year Member

I searched for the flexbox-feature on caniuse.com
So, do the little tags mean that I need to add the browser-specific prefix? Why is this?

When do you think will the layout: box (or rather the the layout: flexbox ) -command be supported by the modern browsers without prefix?

PS: The forum rules say you shouldn't include links, but is it ok if they are not clickable like the one above?
EDIT: Removed links

[edited by: readit at 2:23 am (utc) on Sep 23, 2012]

Leosghost

2:14 am on Sep 23, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Not normally.. no..unless the forum mod ( in this case alt131 ) or an admin says ( in advance )..you ask them via sticky , and wait to be told.. that you can..or not ..

rainborick

5:10 am on Sep 23, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

To answer the other question: yes, the little tags mean you need to use the vendor prefixes. The reasons vary, but it's usually either the standard hasn't been finalized or the vendor's support is in transition.

lucy24

8:22 am on Sep 23, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

When do you think will the layout: box (or rather the the layout: flexbox ) -command be supported by the modern browsers without prefix?

Doesn't matter, really, unless your audience is composed 100% of people who always use the latest hot-off-the-presses browser. (Considering the range of browsers used even by WebmasterWorld members, I really really doubt this.)

What you need to do is use the vendor-specific forms in addition to the bare form. Eventually most browsers will recognize the default form; but you should keep the extension several years longer for backward compatibility.

readit

2:55 am on Sep 24, 2012 (gmt 0)

10+ Year Member

Thank you very much. It is working now. And sure I know about downward compatibility, I was just curious when asking.

kemcar

5:51 am on Sep 24, 2012 (gmt 0)

10+ Year Member

I think using the browser-specific prefix of flex box properties will help you get rid of the problem.

alt131

7:36 pm on Sep 25, 2012 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi readit, and welcome to WebmasterWorld :)

Thanks for reading and respecting the forum rules, and for asking when not sure. We avoid inactive links for all the same reasons as active ones. That said, I do try to make it as easy as possible for posters to point readers to material, so as Leosghost says, feel free to contact me using the link at the top of the page to ask.

What was it that made it work - was it the vendor prefixes? Also, you've said that firebug was reporting the flexbox code as an error, but I couldn't reproduce that - can you provide more information?

Something to keep in mind is that the syntax for the flex box model has changed considerably since the first draft. One quick indicator is that the 2009 draft [w3.org] used display:box, while the 2012 Candidate Recommendation [w3.org] uses display:flex or display:inline-flex. Many of the existing tutorials/examples use the outdated syntax without noting the difference and it probably means forward compatibility issues as well as the usual backwards ones.

The CR was only made up this month so very few documents have been updated, and for fun, the "latest version" shows as either 18th or 21 September depending on how you access w3org! But MDN has two articles that highlight the difference at CSS flexible box [developer.mozilla.org] and Using CSS flexible boxes [developer.mozilla.org]. Unusually the compatibility tables don't explicitly say the vendor prefix is required, but the second article has a note about using them and -moz is still listed in the vendor extensions section (although it also refers to -ms and -o but opera doesn't have one and ie support only starts at 10).

readit

6:25 pm on Sep 28, 2012 (gmt 0)

10+ Year Member

Yes, the prefixes made it work. I am aware of the fact that the standard is not fixed yet and that the box-attribute has been replaced by (temporarily "flexbox" and now by) "flex".

You are also right that firebug doesn't report the flexbox code as an error, it simply ignores it for me. Chromium however points it out.