November 1, 2016 at 7:58 am #247268
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.November 1, 2016 at 8:16 am #247269
No..not exactly. BUT
flex-wrap:wrapand make the
h1100% wide with `flex: 0 0 100%.November 1, 2016 at 8:18 am #247270
Alternatively, don’t use flexbox on the container, wrap the pink divs in their own container and apply flexbox to that.November 1, 2016 at 11:47 am #247279
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!November 1, 2016 at 11:48 am #247280
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?November 1, 2016 at 12:02 pm #247282
flex-basisis not the same as
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 autoso there’s the possibility of the box shrinking if we don’t set the
Force of habit really.November 1, 2016 at 2:08 pm #247286
Thanks mate. Just starting to play around with Flexbox.
What’s your view on using Flexbox for main layouts?
CheersNovember 2, 2016 at 2:58 am #247291
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.November 2, 2016 at 3:23 am #247294
Thanks Paulie thats very helpful.
You must be logged in to reply to this topic.