Skip to main content
Andrew's Tech Classes

User account menu

  • Log in

Main navigation

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

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 flexboxhttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_…
MDN Flex Shorthand Propertyhttps://developer.mozilla.org/en-US/docs/Web/CSS/flex
Flexbox IOhttps://flexbox.io/
Equal Columns With Flexbox: It’s More Complicated Than You Might Thinkhttps://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