HTML All The Things - Web Development, AI, and Developer Careers Box, Flexbox, and Grid
Sep 26, 2018
01:30:23
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
- Matt believes the box model is easiest to learn - especially when learning how web pages flow
- 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...