[css-d] Flex-box: what sets the initial width of a flex item ?
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/
Re: [css-d] Flex-box: what sets the initial width of a flex item ?
Le 8 août 2014 à 20:45, Tim Dawson t...@ramasaig.com a écrit :
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/
…
.main {
display: box;
You are using very old and **deprecated** code here, you really should’t work
with that.
here is a decent tutorial for flexbox, based on what current browsers implement
and the curent spec.
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
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/
Re: [css-d] Flex-box: what sets the initial width of a flex item ?
On Fri, Aug 8, 2014 at 8:19 AM, Philippe Wittenbergh e...@l-c-n.com wrote:
Le 8 août 2014 à 20:45, Tim Dawson t...@ramasaig.com a écrit :
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/
…
.main {
display: box;
You are using very old and **deprecated** code here, you really should’t work
with that.
here is a decent tutorial for flexbox, based on what current browsers
implement and the curent spec.
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
Philippe
--
Was looking for that tutorial. Philippe beat me to it.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
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/
Re: [css-d] Flex-box: what sets the initial width of a flex item ?
I’m unfamiliar with the Compass syntax. However, the syntax looks old.
First get the wrapper in order:
start with “display:flex” for the parent container. then “flex-direction: row”
to set the orientation of the child elements. Then justify-content.
justify-content will set the position of your elements inside of the container.
justify-content: center will put stuff in the center, while 'space-between'
throws your elements out to the edges, and evenly spaces the middle.
After that, add flex styles to the child elements:
Flex-basis is used to set the “starting” width of a child element. You can set
flex-basis in %, em, or px (or whatever your heart’s desire)
'Flex-basis' means that this is a “default” width of the child element - before
it starts to grow or shrink. All elements will start with this space, before
expanding or shrinking.
'flex-grow' sets how much the child element can grow, in comparison to its
siblings. If you set all child elements to flex-grow:1, then, after flex-basis,
they will grow to fill up the available space. If only one element is set to
flex-grow:1, then it will grow, while the others stay the same.
Here’s a quick example I threw together: http://www.cssdesk.com/PFBAX
On Aug 8, 2014, at 13:45, Tim Dawson t...@ramasaig.com wrote:
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/
…
.main {
display: box;
__
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/
[css-d] Flex-box: what sets the initial width of a flex item ?
Thank you Philippe and Tom, Having done a bit more reading since my initial post on this subject I am coming to the conclusion that the new (2012) syntax has avoided the width problem as I expressed it. It looks as if the 'flex-basis' property can have a percentage width value which sets the percentage of the container taken up before growth/shrinkage. In which case '50%' will achieve my aim. I am now translating my example code to the new syntax. 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/
Re: [css-d] Flex-box: what sets the initial width of a flex item ?
On 08/08/2014 13:32, Frank Taylor wrote: I’m unfamiliar with the Compass syntax. However, the syntax looks old. I did realise it was old. I didn't realise how much difference that would make. Anyway, that's how one learns. I think I can make the transition to the new code, although some terms are so completely different it may just be easier to start again. Here’s a quick example I threw together: http://www.cssdesk.com/PFBAX Thanks for your offer of help. 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/
Re: [css-d] Flex-box: what sets the initial width of a flex item ?
Flexbox makes life a lot more fun. Though three warnings: flex-wrap doesn’t work in FireFox. **still**. It’s best to assume that everything is flex-wrap: nowrap for a good while; at last reading, they had no immediate plans to solve this. A vendor-prefixing tool is your friend. Chrome will accept the unprefixed syntax, Safari and Opera will not. Forms are tricky. fieldset seems to refuse to accept ‘display:flex’, no matter how much that I insist that it should. Same with label, and textarea On Aug 8, 2014, at 14:49, Tim Dawson t...@ramasaig.com wrote: On 08/08/2014 13:32, Frank Taylor wrote: I’m unfamiliar with the Compass syntax. However, the syntax looks old. I did realise it was old. I didn't realise how much difference that would make. Anyway, that's how one learns. I think I can make the transition to the new code, although some terms are so completely different it may just be easier to start again. Here’s a quick example I threw together: http://www.cssdesk.com/PFBAX Thanks for your offer of help. 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/ __ 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/
Re: [css-d] Flex-box: what sets the initial width of a flex item ?
My apologies: I sent this reply earlier, but it didn't go into the thread. Thank you Philippe and Tom, Having done a bit more reading since my initial post on this subject I am coming to the conclusion that the new (2012) syntax has avoided the width problem as I expressed it. It looks as if the 'flex-basis' property can have a percentage width value which sets the percentage of the container taken up before growth/shrinkage. In which case '50%' will achieve my aim. I am now translating my example code to the new syntax. 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/
Re: [css-d] Flex-box: what sets the initial width of a flex item ?
Le 8 août 2014 à 21:55, Frank Taylor pace...@madebypaceaux.com a écrit : flex-wrap doesn’t work in FireFox. **still**. It’s best to assume that everything is flex-wrap: nowrap for a good while; at last reading, they had no immediate plans to solve this. uh ? flex-wrap works fine in Firefox 28 and up. https://bugzilla.mozilla.org/show_bug.cgi?id=702508 Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ 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/
Re: [css-d] Flex-box: what sets the initial width of a flex item ?
well hot diggity. It does work. That’s what I get for not researching something before I say it. I’m still sticking to my guns on fieldset not doing display:flex. That one forced me to switch something to a div earlier this week. On Aug 8, 2014, at 15:08, Philippe Wittenbergh e...@l-c-n.com wrote: Le 8 août 2014 à 21:55, Frank Taylor pace...@madebypaceaux.com a écrit : flex-wrap doesn’t work in FireFox. **still**. It’s best to assume that everything is flex-wrap: nowrap for a good while; at last reading, they had no immediate plans to solve this. uh ? flex-wrap works fine in Firefox 28 and up. https://bugzilla.mozilla.org/show_bug.cgi?id=702508 Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ 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/
Re: [css-d] Flex-box: what sets the initial width of a flex item ?
well hot diggity. It does work. That’s what I get for not researching something before I say it. I’m still sticking to my guns on fieldset not doing display:flex. That one forced me to switch something to a div earlier this week. On Aug 8, 2014, at 15:08, Philippe Wittenbergh e...@l-c-n.com wrote: Le 8 août 2014 à 21:55, Frank Taylor pace...@madebypaceaux.com a écrit : flex-wrap doesn’t work in FireFox. **still**. It’s best to assume that everything is flex-wrap: nowrap for a good while; at last reading, they had no immediate plans to solve this. uh ? flex-wrap works fine in Firefox 28 and up. https://bugzilla.mozilla.org/show_bug.cgi?id=702508 Philippe -- Philippe Wittenbergh http://l-c-n.com/ __ 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/
Re: [css-d] Flex-box: what sets the initial width of a flex item ?
Thanks to everybody who has helped me with this so promptly. I've now translated into the latest syntax, though I'm sure there will be more to do when I start adding real content. http://webadit.co.uk/hminew3/ Thanks for the warning about fieldset, Frank. I use them a lot, so will need to take care. On 08/08/2014 13:55, Frank Taylor wrote: A vendor-prefixing tool is your friend. Indeed. Funnily enough it was a worry about vendor-prefixing in SASS that took me to Compass and then by devious routes to have a try at implementing a flex-box. 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/
[css-d] Google map link won't open in iPhone - is this a css issue?
Hi. I'm not sure if this is a CSS issue, so please forgive me if it's not. My Get Directions link on the right side of the page doesn't work on the iPhone, but works fine on my PC. Is this a CSS issue? http://www.sportsmansresource.com/anglercharters/index.htm Thanks Bruce __ 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/
Re: [css-d] Google map link won't open in iPhone - is this a css issue?
On Fri, Aug 8, 2014 at 4:30 PM, bho...@aol.com wrote: Hi. I'm not sure if this is a CSS issue, so please forgive me if it's not. My Get Directions link on the right side of the page doesn't work on the iPhone, but works fine on my PC. Is this a CSS issue? http://www.sportsmansresource.com/anglercharters/index.htm On my iPhone, reading my mail in the gmail app, clicking on that link brought me to google maps with a pin dropped on Mansion Marina. __ 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/
Re: [css-d] Google map link won't open in iPhone - is this a css issue?
On Fri, Aug 8, 2014 at 4:30 PM, bho...@aol.com wrote: Hi. I'm not sure if this is a CSS issue, so please forgive me if it's not. My Get Directions link on the right side of the page doesn't work on the iPhone, but works fine on my PC. Is this a CSS issue? http://www.sportsmansresource.com/anglercharters/index.htm The link sent me to the map in gmail on iPhone 5s. asideI needed a magnifying glass to find it in portrait mode/aside Best, Davd Laakso -- Chelsea Creek Studio http://ccstudi.com desktop | laptop | tablet | mobile __ 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/
Re: [css-d] Google map link won't open in iPhone - is this a css issue?
Worked fine for me gmail app sent me to Chome and google map on iPhone 5S On Friday, August 8, 2014, bho...@aol.com wrote: Hi. I'm not sure if this is a CSS issue, so please forgive me if it's not. My Get Directions link on the right side of the page doesn't work on the iPhone, but works fine on my PC. Is this a CSS issue? http://www.sportsmansresource.com/anglercharters/index.htm Thanks Bruce __ 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/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ 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/
Re: [css-d] Google map link won't open in iPhone - is this a css issue?
Pasting the link into iOS Safari and clicking the directions link took me to google maps ok, but I briefly saw an error message about an invalid link. On Friday, August 8, 2014, bho...@aol.com wrote: Hi. I'm not sure if this is a CSS issue, so please forgive me if it's not. My Get Directions link on the right side of the page doesn't work on the iPhone, but works fine on my PC. Is this a CSS issue? http://www.sportsmansresource.com/anglercharters/index.htm Thanks Bruce __ 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/ -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com __ 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/
