homepage Welcome to WebmasterWorld Guest from 54.167.238.209
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Flexbox- attributes seem to get ignored.
readit




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

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




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

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

Paul_o_b




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

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




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

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




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

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




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

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




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

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




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

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

kemcar




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

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

alt131




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

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




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

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved