Jump to content


Photo

CSS Flexbox Layout

css flexbox layout

  • Please log in to reply
11 replies to this topic

#1 GrahamUK33

GrahamUK33

    Forum Newcomer

  • Members
  • Pip
  • 41 posts
  • Gender:Male
  • Location:Leicestershire
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 27 November 2017 - 10:49 AM

I am wondering if to create a new website using the CSS Flexbox Layout, is it good now good practice when creating a layout to use Flexbox?

 

Does Flexbox work well cross-browser and with older browsers?

 



#2 BlueDreamer

BlueDreamer

    Web Guru

  • Moderators
  • PipPipPipPipPipPip
  • 7,470 posts
  • Gender:Male
  • Location:Northampton (where?)
  • Experience:Advanced
  • Area of Expertise:Web Developer

Posted 27 November 2017 - 12:11 PM

Check https://caniuse.com/#feat=flexbox - if the level of browser support is ok for your project then yes. You can always add fallbacks fro older browsers if you need to.



#3 GrahamUK33

GrahamUK33

    Forum Newcomer

  • Members
  • Pip
  • 41 posts
  • Gender:Male
  • Location:Leicestershire
  • Experience:Intermediate
  • Area of Expertise:I'm Learning

Posted 27 November 2017 - 01:13 PM

Thanks, it still looks like using Flexbox is still quite new and a lot of workarounds are needed for cross-browser support and older browsers.

 

This maybe useful for others 'A Complete Guide to Flexbox' at https://css-tricks.c...ide-to-flexbox/

 

I think for me, Flexbox is too advanced to use for my knowledge.



#4 Jack

Jack

    NaN

  • Moderators
  • PipPipPipPipPip
  • 3,218 posts
  • Gender:Male
  • Location:Jersey Channel Islands
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 27 November 2017 - 04:15 PM

Flexbox is designed for specific cases where other methods fall short, it's not a replacement for other display properties, and it's pretty bad at creating re-usable grid systems. Display inline block should be suitable for most cases, occasionally you may have to use a bit of flexbox or similar, but that should be uncommon.



#5 bwclovis

bwclovis

    Forum Newcomer

  • Members
  • Pip
  • 7 posts
  • Gender:Male
  • Experience:Web Guru
  • Area of Expertise:Web Developer

Posted 06 December 2017 - 03:07 PM

Flexbox is designed for specific cases where other methods fall short, it's not a replacement for other display properties, and it's pretty bad at creating re-usable grid systems. Display inline block should be suitable for most cases, occasionally you may have to use a bit of flexbox or similar, but that should be uncommon.

Disagree. Flex box is most defiantly a better approach then float or inline block and can be used to overcome several short comings of each.



#6 TimW

TimW

    Advanced Member

  • Members
  • PipPipPip
  • 285 posts
  • Gender:Male
  • Location:West Country
  • Experience:Intermediate
  • Area of Expertise:Nothing

Posted 06 December 2017 - 07:06 PM

Not sure floating was designed for grid layouts, and neither were tables but that has been the way of the web since its inception, that everything is used for something else if it's found to work, and really why not?

 

While I'm here:

The CSS3 Flexible Box, or flexbox, is a layout mode intended to accommodate different screen sizes and different display devices. For many applications, the flexible box model is easier than the block model since it does not use floats, nor do the flex container's margins collapse with the margins of its contents.

 

https://developer.mo..._flexible_boxes

 

So it sort of is for layouts as an improved alternative to floating divs


Edited by TimW, 06 December 2017 - 07:12 PM.


#7 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,595 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 07 December 2017 - 06:51 AM

It's good for layout components. It's not necessarily good for the whole site (but it can be done)

 

For example, flexbox works well if you have a row of boxes. You can use media queries to align horizontally for large screens and vertically for small screens. It does this very well

 

https://css-tricks.c...ide-to-flexbox/



#8 Jack

Jack

    NaN

  • Moderators
  • PipPipPipPipPip
  • 3,218 posts
  • Gender:Male
  • Location:Jersey Channel Islands
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted 07 December 2017 - 09:38 AM

Disagree. Flex box is most defiantly a better approach then float or inline block and can be used to overcome several short comings of each.

 

I didn't say flexbox wasn't better, but you can achieve a lot with inline-block without any fallback for older browsers. Flexbox is designed to solve specific use cases in layout, not as a grid system, which is why CSS grid is now a spec, and it's noticeably better than trying to do the same with flexbox.



#9 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 4,052 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 07 December 2017 - 12:45 PM

Disagree. Flex box is most defiantly a better approach then float or inline block and can be used to overcome several short comings of each.

No it's not.  Flexbox doesn't work well when dealing with asynchronously loaded content, causing the page to re-render in a jarring manner.  Jack is right in his statement above.

Take a look at the grid I created here https://nebulaui.git...veTabId=options

Out of all the options presented the only time this grid uses flexbox is for equal height items.  Flexbox is just a tool like any other and didn't replace anything.



#10 bwclovis

bwclovis

    Forum Newcomer

  • Members
  • Pip
  • 7 posts
  • Gender:Male
  • Experience:Web Guru
  • Area of Expertise:Web Developer

Posted 07 December 2017 - 07:18 PM

No it's not.  Flexbox doesn't work well when dealing with asynchronously loaded content, causing the page to re-render in a jarring manner.  Jack is right in his statement above.

Take a look at the grid I created here https://nebulaui.git...veTabId=options

Out of all the options presented the only time this grid uses flexbox is for equal height items.  Flexbox is just a tool like any other and didn't replace anything.

 Yes, and what I see is a bunch more mark up than is needed and sections that don't expand to match when there is more content in one vs the other.

 

Not to mention the benefit on page performance, if your into that sort of thing:

https://developers.g...ayout-thrashing


Edited by bwclovis, 07 December 2017 - 07:21 PM.


#11 fisicx

fisicx

    Web Guru

  • Privileged
  • PipPipPipPipPip
  • 1,595 posts
  • Gender:Male
  • Location:Aldershot
  • Experience:Intermediate
  • Area of Expertise:Designer/Coder

Posted 08 December 2017 - 07:50 AM

If you want to be really pedantic: people use grids and float and flex and other tools to create a layout they like.

 

In many cases this produces something pretty but isn't that usable - especially when you consider most non-business browsing it done with tablets and phones.

 

So why not build mobile first. Create a layout that works well on a smaller screen and scale up. You often discover that a simple vertical scrolling layout without rows of content boxes and animations and whatever work just as well.



#12 rbrtsmith

rbrtsmith

    ReferenceError

  • Privileged
  • PipPipPipPipPip
  • 4,052 posts
  • Gender:Male
  • Location:Manchester, UK
  • Experience:Nothing
  • Area of Expertise:Web Developer

Posted 08 December 2017 - 08:47 AM

 Yes, and what I see is a bunch more mark up than is needed and sections that don't expand to match when there is more content in one vs the other.

 

Not to mention the benefit on page performance, if your into that sort of thing:

https://developers.g...ayout-thrashing

I do a lot of performance optimisations as part of my job and an extra few `<div>` tags which actually often isn't the case with flexbox will make zero difference.  If you are worried about that then you are guilty of prematurely optimising.
The rendering time of flexbox is an order of magnitude more costly than a small amount of extra markup.  But that's not the issue here.  The issue is that flexbox layout is typically dictated by content so as content gets loaded asynchronously the layout has to be re-calculated after the initial render.
re-rendering an entire view is costly in terms of layout calculations and paints.  Essentially flexbox can result in layout thrashing just like the link you sent describes.
A bit of extra markup to render does not result in thrashing.

Markup becomes a performance issue when you're comparing thousands of extra nodes.


Edited by rbrtsmith, 08 December 2017 - 09:00 AM.






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users