Skip to main content

Forums

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #247268
    Ricky55
    Participant

    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.

    http://codepen.io/anon/pen/QKemNr

    #247269
    Paulie_D
    Moderator

    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%.

    #247270
    Paulie_D
    Moderator

    Alternatively, don’t use flexbox on the container, wrap the pink divs in their own container and apply flexbox to that.

    #247279
    Ricky55
    Participant

    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!

    #247280
    Ricky55
    Participant

    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?

    #247282
    Paulie_D
    Moderator

    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-shrinkto 0.

    Force of habit really.

    #247286
    Ricky55
    Participant

    Thanks mate. Just starting to play around with Flexbox.

    What’s your view on using Flexbox for main layouts?

    Cheers

    #247291
    Paulie_D
    Moderator

    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.

    #247294
    Ricky55
    Participant

    Thanks Paulie thats very helpful.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.
icon-link icon-logo-star icon-search icon-star