Skip to main content

Forums

This topic contains 8 replies, has 2 voices, and was last updated by  Ricky55 2 years, 6 months ago.

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.

    #247269

    Paulie_D
    Moderator

    No..not exactly. BUT

    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