Skip to main content
Andrew's Tech Classes

User account menu

  • Log in

Main navigation

  • Courses
  • Classes
  • Exercises
  • Resources
  • Questions
  • Tips
  • Articles
  • Projects
  • Positions
  • Search

Flexbox

Flexbox is a way to lay out elements in CSS. It is flexible, meaning it can adapt to different window sizes.

Flex shorthand

Flex item styles for flex-grow, flex-shrink, flex-basis.

div {
  flex: 1 1 80%;
}

 

Level
Intro
Topics
#Flexbox
Resources
Basic concepts of flexbox
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_…
MDN Flex Shorthand Property
https://developer.mozilla.org/en-US/docs/Web/CSS/flex
Flexbox IO
https://flexbox.io/
Equal Columns With Flexbox: It’s More Complicated Than You Might Think
https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you…
Exercises
Lay out a form with flexbox
Course: Beginner CSS
CSS Overview
Styling Text
Styling Links
Styling Forms
CSS Spacing
CSS Position
Overflowing items
CSS Variables
Borders
Browser Default Styles
Cascading Styles
Pseduo Classes And Elements
Flexbox
CSS Grid

Footer

  • Portfolio
  • DrupalArchitect
  • GitHub
  • Sitemap