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)