Jump to content
GrahamUK33

CSS Flexbox Layout

Recommended Posts

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?

 

Share this post


Link to post
Share on other sites

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.com/snippets/css/a-guide-to-flexbox/

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

 

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

Edited by TimW

Share this post


Link to post
Share on other sites

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.com/snippets/css/a-guide-to-flexbox/

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.github.io/nebula/api/objects/grid?GridActiveTabId=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.

Share this post


Link to post
Share on other sites

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.github.io/nebula/api/objects/grid?GridActiveTabId=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.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing

Edited by bwclovis

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • By Mario89
      I created my first website. Please tell me, what can I change and improve?
      http://mario89.smarthost.pl/
    • By rookie
      I’m very curious about this topic cause the definition of web designer is different from country to country, for example some countries define a web designer as a person who knows design and programing (Javascript and php etc).
       
      I wanna know where you are from and which language you need to be web designer like the following.
       
      Country   :  Japan
      Language:   HTML,CSS,*JavaScript, *wordpress 
       
       
      *As to JavaScript, you don’t have to know everything about it but at least how it works. 
        Plus you basically just need to know how to customize jQuery.
       
       I really wanna know to what extent I should learn JS or php if I need to learn them as web designer in some countries.
       
      Thanks in advance for your help ! 
    • By Seth
      Trying to get the outside border to go around all the copy including the bullets. What am I missing here?
       
      Code:
      <html> <head> <title>fancy box 2 column bullet list</title> </head> <body> <div style="border: 1px solid #41b6e6; padding:0px;">     <div style="background: #41b6e6; color:#fff; font-weight:bolder;">SMI Network Security Services</div>     <div>Some of the key services we provide to help you address your security needs include</div>     <div style="width:50%; float:left;">         <ul>             <li>Vunerability Management</li>             <li>Web Application Security/Firewall</li>             <li>DDoS Monitoring & Mitigation</li>             <li>Real-time Log Flow Analaysis</li>         </ul>     </div>     <div style="width:50%; float:left;">         <ul>             <li>Event Log Management</li>             <li>Managed Cloud Security</li>             <li>Network-Based Security & Protection</li>         </ul>     </div> </div> </body> </html>  
    • By colinbrazier
      Hi everyone,
      My dropdown multi-level menu at www.fobgfc.org doesn't work with touch devices.  It doesn't drop down at all.  Basically because it makes use of :hover.
      I'd like the functionality to behave like the menu on www.chipsteadfc.org.uk
      I will consider using jQuery.  
      How's best to do this please?
      Cheers,
          Col
    • By Seth
      Hey
      I can't find the CSS style to style this button. You can find it on https://ashleyassists.mystagingwebsite.com/social-media/

  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,982
    • Most Online
      4,970

    Newest Member
    froebeli
    Joined
  • Forum Statistics

    • Total Topics
      65,698
    • Total Posts
      452,924
×