Box, Flexbox, and Grid

We dive into the different CSS layout methods that have evolved over recent years including box model, flexbox, and grid.

Segment 1 - Layout Models

• StackChief reference article


• Box Model
  
  • Elements comprise of: content, padding, border, margin
  
  
  • Dimensions like height and width
  
  
  • Floats and clearfix
  
  
  • CSS Box Model - W3Schools article
  
  
  
  


• Flexbox
  
  • Evolution of the box model
  
  
  • Comprises of a container element called the flex container, which "control" their child elements called flex items
  
  
  • Flexbox is fantastic for responsive layouts
  
  
  • 1 dimensional layouts
  
  
  
  


• CSS Grid
  
  • New CSS layout method that is supported in the latest version of major browsers (IE doesn't have support)
  
  
  • 2 dimensional layouts
  
  
  • Can customize every property of the grid 
    
    • # of rows and columns
    
    
    • size of row in various metrics (px, %, vh, vw, auto)
    
    
    • spacing between rows and columns
    
    
    
    
  
  
  • Very clean code - no need for row and column containers
  
  
  
  

Segment 2 - Box vs Flexbox vs Grid

• Responsivity
  
  • Box, flexbox, and grid can all be used to make responsive layouts
  
  
  • Many of our production websites are still in box layout, they still work without issue on modern browsers and devices
  
  
  
  


• Layouts
  
  • Basic sites can use any of the layout models
  
  
  • Site components (ie navbar) can be made easily with flexbox due to their one dimensional layout
  
  
  • Full site structures are easier to make with CSS grid due to two dimensional column and row functionality
  
  
  
  


• Easy of Use
  
  • Matt believes the box model is easiest to learn - especially when learning how web pages flow
    
    • Box model is more human readable, whilst flexbox allows for more complex layouts with less code and micromanaging
    
    
    
    
  
  
  
  


• Links
  
  • Box Model - https://caniuse.com/#feat=inline-block
  
  
  • Flexbox - https://caniuse.com/#search=flex
  
  
  
  

Web News - 'Unobtrusive Ads'

• Ad strategies - which are you ok with?
  
  • Sponsored posts
  
  
  • Banner ads (Google Ads, etc.)
  
  
  • Full page timed ads
  
  
  • Sidebar ads
  
  
  • Chumbox (From around the web, recommended for you)
  
  
  
  


• What are some ad strategies that annoy you?


• Do you think ads on a web page or app are a fair way to monetize? (freemium ad supported)


• Do you care what companies' ads are served to you? (ie you don't like Coke but like Pepsi)

Support Us

• TP Link Deco Whole Home Mesh WiFi System (Amazon Affiliates Link)


• Become a Patreon Supporter

You can find us on...

Facebook | Twitter | Instagram | 

RSS | Spotify | Reddit

Medium | YouTube | GitHub