I'm experimenting with the CSS3 Flexible Box layout. Since I am also using SASS I copied a very
simple flex layout from: http://compass-style.org/examples/compass/css3/box/
I realise, of course, that the Compass example exists to show the mixins, and isn't intended to
be a comprehensive tutorial on flex-box. However, because the code is relatively simple I
thought it would make a good starting point, so I copied the HTML and CSS and set it up on a
test site. You can see it here: http://webadit.co.uk/hminew3/
I'm puzzled about setting the initial width of the two flex items (the side bar and the main
content). I'm trying to make them equal in width at all times.
Without a value (as originally in the Compass example), or with a value set as a percentage
(even 100%), the items appear to derive their initial width from their content, then expanding
proportionately to fill the container. I understand the way that the unfilled space is allocated
between the flex items in accordance with the 'box-flex' values (hence setting both to '1' to
get equal expansion). However my understanding is that the two items won't be the same final
width unless their initial widths are the same.
I can get them equal by setting a width value in pixels (but I think it needs to exceed the
content width of the flex items). Hence my selection of 300px in the reworked example. (100px
wasn't enough, but it did work at 150px with the very limited content shown)
This is the CSS (shorn of the vendor prefixes for clarity):
.main {
display: box;
box-orient: horizontal;
box-align: stretch;
box-direction: reverse;
height: 200px;
width: 100%;
}
.main .content, .main .sidebar {
padding: 20px;
width: 300px; (this value makes the two flex items equal width)
}
.main .content {
box-flex: 1; (this value was '4' in the Compass example, but that leads to
unequal expansion)
background-color: #c5c1b4;
}
.main .sidebar {
box-flex: 1;
background-color: #375f99;
margin-right: 1px;
}
So far I've only tried this in Firefox 31 (but a quick look in Chrome 36 suggests it's the
same). It works at smaller screen sizes too (I realise the banner headings don't, yet) .
I'm aware that there have been some changes in the syntax since Compass wrote the example I'm
working from, but since it works (in the main) I'm hoping it's not just that that's giving me
the problem with widths.
It's odd to have to use pixel values to set widths in something that is intended to be the
ultimate in fluidity. Surely there's a better way ?
Regards,
Tim Dawson
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
