Getting Started with CSS Flexbox Basics
The CSS Flexible Box “Flexbox” Layout was designed to provide a convenient, flexible way to arrange items with respect to each other and free space around them. Let’s get acquainted with some of the fundamental properties used to better understand the Flexbox layout method.
Display: flex
First, you’ll want to let your element know you’re making a flex container. You can do this with display: flex. You’ll want to apply this to the parent container/element (the flex container), as all of the children elements (flex items) will be organized according to your flex design.
.container {
display: flex
}Flex-direction
Do you want all of the items in the container to be aligned from left to right, or right to left? Do you want them to be arranged in a column from top to bottom or bottom to top? The flex-direction property magically handles this for you.
You can specify flex-direction: row or flex-direction: column. There’s also the option of reversing this with flex-direction: row-reverse or flex-direction: column-reverse. As the name implies, this orders the items in reverse direction, from right to left (in a row), and from bottom to top (in a column). If you don’t specify a flex-direction and omit this property alltogether, the default is row.
Justify-content
We can use the justify-content property to space our items within a container. Justify-content will align items along an axis. The direction of this axis is determined by the flex-direction property (described above). For example, if the flex-direction property is set to row, then setting justify-content: flex-start will align the items up from the top left corner, with all extra space to the right. To visualize this, think of all of the items in the container as clothes on a clothesline. Justify content is the magic hand that allows you to slide items along the clothesline to space them out evenly and ensure even drying.
The default setting for justify-content is flex-start. Other common justify-content settings include center, space-between (which distributes space between items) and space-around (which distributes space around the sides of all of the items). The difference between space-between and space-around is that space-around places space around the outermost side of the outer two items as well, whereas space-between does not (pictured below).
Align-items
While justify-content aligns items on a a main axis (often horizontal, as pictured above), then align-items will align items along the cross axis (perpendicular to the justify-content axis). For example, by default, justify-content will align items horizontally and align-items would then arrange items vertically.
You’ll often see the align-items property set to flex-start, flex-end, center or stretch, to name a few. Similar to justify-content, align-items follows the direction set by the flex-direction property. Here’s a visualization of this property, based on the default settings (with flex-direction set to row).
There are many other Flexbox properties (flex wrap, flex flow and align-content), but these help provide you with a starter-pack to get the basics down and begin implementing Flexbox in your projects without delay!
Additional Resources and References
https://www.freecodecamp.org/news/flexbox-the-ultimate-css-flex-cheatsheet/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://flexboxzombies.com/p/flexbox-zombies
