Flex, aka "flexbox", allows you to create equal-height columns, vertical centering, and other content-out layouts with just a few lines of CSS.
- [Instructor] Flex, also known as flex box … is a content first or content out layout module in CSS, … which is applied to a parent container, … called the flex container, … and affects both this flex container … and its immediate children called flex items. … It works like this, … in my browser, I have an unordered list … with some list items, … this is a standard navigation menu, … you can see it over here, … now I want to turn the unordered list into a flex container, … I do that by targeting the container in CSS … in this setting display flex. … This creates a new flex container … around the child items, which are now flex items, … and each of these flex items are given … an equal share of the available space … based on their intrinsic size. … You'll notice that some of these items … have more content in them, … so they're taking up more space, … and some of the items are taller than other items, … so in this case we have this standards and such item … which is two lines instead of one, …
- Designing with boxes
- The origin of the box in typography
- What is the CSS box model?
- Changing the contents within the box
- Floating and clearing content
- Using the clearfix
- Working with Float, Flex, and Grid
- CSS shapes