- This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
Viewing 9 posts - 1 through 9 (of 9 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi guys
Just playing around with Flexbox. Is it possible to remove this h1 from being a flex item?
Seems like a very common set up does this.
No..not exactly. BUT
http://codepen.io/Paulie-D/pen/ameYKv
You add flex-wrap:wrap
and make the h1
100% wide with `flex: 0 0 100%.
Alternatively, don’t use flexbox on the container, wrap the pink divs in their own container and apply flexbox to that.
Thanks Paulie much appreciated.
I did try the 0 0 100% but I was missing the flex wrap, makes totally sense now I’ve seen it.
I get that 100% means 100% width but why do we need the 0 0? what are these doing?
Thanks again man!
Sorry to be a bit cheeky but whats the difference between
0 0 100% and using flex-basis: 100%; and which should really be used?
flex-basis
is not the same as width
.
I prefer using the shorthand of flex:0 0 100%
meaning “don’t grow, don’t shrink and be 100% wide at the start”.
The default is flex:0 1 auto
so there’s the possibility of the box shrinking if we don’t set theflex-shrink
to 0.
Force of habit really.
Thanks mate. Just starting to play around with Flexbox.
What’s your view on using Flexbox for main layouts?
Cheers
I’ve used it in a project or two where I knew all users would be using compatible broswers and so I didn’t have to provide fallbacks but those opportunities are rare right now.
Personally, I’m happy to use it where it’s non-critical and I can provide fallbacks if necessary.
Thanks Paulie thats very helpful.