Flexbox Overview

Subscribe to my newsletter and never miss my upcoming articles

The Purpose: The Flexible Box Layout Module, makes it easier to design a flexible responsive layout structure without using float or positioning. It's a more efficient way to layout, align, and distribute space among items in a container.

/*This creates a flex container and all elements inside this container become 'flex items'*/
.flex-container {
    display: flex;
}

Terminology

  • Flex container: refers to the element that has the display: flex property applied to it.
  • Flex items: refers to the elements that are contained within a flex-container.
  • Main axis: By default, the main axis direction goes from left to right. You can change the direction of the main axis with flex-direction.
  • Cross axis: is the opposite of whatever the main axis is. By default, the direction of it goes from top to bottom.

πŸ’‘ The main axis and cross axis will always be perpendicular to one another.

Screen Shot 2020-08-09 at 5.55.19 PM.png

Screen Shot 2020-08-09 at 5.56.16 PM.png

Container Properties

  1. flex-direction
  2. flex-wrap
  3. justify-content
  4. align-items
  5. align-content

1) flex-direction

  • Allows us to specify how flex items are placed within a flex container. It defines the main axis and its direction. Default is flex-direction: row.
  • When flex-direction: row is applied, the main axis is horizontal.
  • When flex-direction: column is applied, the main axis is vertical.
  • Sandbox Examples πŸ—οΈ

2) flex-wrap

  • Allows us to specify if the items in a flex container (flex items) are forced into a single line or can be wrapped into multiple lines. Default is flex-wrap: nowrap. This applies to both rows and columns (although columns are less common and look a little wonky.)
  • If flex-wrap is not defined on a container and you have elements with large widths, the flexbox container will ignore them and make it so that everything fits on a single line. The container will make the items as big as they can without making them wrap.
  • Sandbox Examples πŸ—οΈ

3) justify-content

  • Allows us to specify how the space inside of a flex container should be distributed between the different items along the main axis.
  • Default is justify-content: flex-start
  • Sandbox Examples πŸ—οΈ

4) align-items

  • Defines how space is distributed between items in flex container along the cross axis. Default is align-items: stretch.
  • justify-content and align-items do the same things, just on different axes.
  • Sandbox Examples πŸ—οΈ

5) align-content

  • Defines how space is distributed between rows in a flex container along the cross axis. Default is align-content: stretch.
  • Sandbox Examples πŸ—οΈ

Flex-Item Properties

  1. align-self
  2. order
  3. flex-basis
  4. flex-shrink
  5. flex-grow
  6. flex

1) align-self

  • Allows you to override align-items on an individual flex item. Default is align-self: auto.
  • It’s very similar to align-items. While align-items encompasses all flex items in a container, align-self grabs an individual flex item and applies the property to that individual item only along the cross axis.
  • Sandbox Examples πŸ—οΈ

2) order

  • Specifies the order used to layout items in their flex container.
  • By default, all items have an order of 0.
  • order only affects the visual order of items and not their logical order. Due to this, it could cause accessibility issues with screen readers since it creates a disconnect between what the user sees and the actual DOM order.

3) flex-basis

  • Specifies the ideal size of a flex item before it’s placed into a flex-container.
  • It’s sort of like width when you are working with rows and height when you’re working with columns.
    • For example, If you were to have a row with a set width and flex-basis, the flex-basis value would get precedence over the width since it’s the β€œideal size.”
    • The Difference between width and flex-basis

4) flex-shrink

  • Dictates how items should shrink when there is not enough space in a container. By default, flex-shrink: 1 is applied and all items will shrink at the same rate.
  • The math for flex-shrink is different from flex-grow.
  • This property can be useful for things like navigation bars where you want things to shrink in a particular way.
  • MDN - flex-shrink

5) flex-grow

  • Dictates how the unused space (if any) should be spread amongst flex items. By default, flex-grow: 0 is applied and all items will grow at the same rate.
  • When you assign a number to flex-grow, all items will evenly divide the unused space amongst themselves.
  • Article on flex-grow

6) flex

  • Defines how a flex item will grow or shrink to fit the available space in a container. It is a shorthand property for flex-grow, flex-shrink, and flex-basis.
    • Syntax: flex: <flex-grow> <flex-shrink> <flex-basis>
  • MDN - CSS flex Property

References

[Photo by Andrew Schultz on Unsplash ]

Syed Fazle Rahman's photo

Very well written, Alyssa. Bookmarked it for future reference.

Alyssa Holland's photo

Thank you for the kind words Syed Fazle Rahman 😊

Subha Chanda's photo

A quick refresher. Thanks for sharing. πŸ˜„

Alyssa Holland's photo

Thanks for reading!

Nagarjun Shroff's photo

Thanks for sharing! Liked the sandbox examples

Alyssa Holland's photo

Great! I hope it was helpful!

Prateek Aher's photo

Loved those Sandbox examples Alyssa. Codepen wouldn't have cut it. Awesome article. Definitely saving it for a re-read.

Alyssa Holland's photo

I'm happy to hear you liked the sandbox examples! I found them to be very helpful when I was learning Flexbox. Thanks so much for reading and I hope it will be a helpful resource!

Omowunmi Sogunle's photo

Thanks for sharing, really insightful

Alyssa Holland's photo

Thanks for reading! I hope it can be a helpful resource!