Simple, beginner steps: CSS Flexbox!

Let's talk through the basics of one of the most versatile modules in CSS -- the flexbox!

The flexbox has two elements: the parent element (the container that's 'flexing') and the child element (the flex items). It's amazingly versatile because it allows us to format, layout and organize even when the size of the space is unknown-- or it's dynamic!

Parent properties:

1. display This is the building block, that is going to define the flex container.

.container {
  display: flex;
}

2. flex-direction This is going to dictate which axis your flexbox parent expands on, and which direction on that axis.
row: left to right
row-reverse: right to left
column: north to south
column-reverse: south to north

.container {
  flex-direction: row (OR) row-reverse (OR) column (OR) column-reverse;
}

3. flex-wrap Flexbox will always try to fit items into one line-- this property can allow it to wrap to a new line.
nowrap: all on one line
wrap: wrap onto multiple lines (top to bottom)
wrap-reverse: multiple lines (bottom to top)

.container {
  flex-wrap: nowrap (OR) wrap (OR) wrap-reverse;
}

4. justify-content This property defines the alignment on the axis declared originally for the flex.
flex-start: items are packed toward the start of the flex-direction
flex-end: packed toward end of flex direction
start: packed toward start of writing-mode direction
end: packed toward end of writing-mode direction
left: left packed toward left edge of container
right: left packed toward right edge of container
center: centered
space-between: items are evenly spaced on line
space-around: items are evenly spaced, space around them is also even
space-evenly: spacing between items and edges is even

.container {
  justify-content: flex-start (OR) flex-end (OR) center (OR) space-between (OR) space-around (OR) space-evenly (OR) start (OR) end (OR) left (OR) right (OR) you get the idea;
}

5. align-items This defines how the items are laid out on the crossing axis of the current line.

stretch: (default) stretches to fill container
flex-start: start of the cross axis
flex-end: end of the cross axis
center: items are centered on cross axis
baseline: items are aligned so their baselines are aligned

For this one, imagine your flex goes L-->R. Flex-start would mean all items align at the top (North). Flex-end would align them at the bottom (South). Center would center them along the center of North-South, centered by the item's center. Stretch would make them fill equal North-South space from the center. Baseline will center them North-South by baseline.

.container {
 align-items: (value here)
}

6. align-content This aligns the lines of a flex container within the extra space on the cross axis. This property only effects multi-lines flex containers.

normal: (default)
flex-start: items packed to start of container
flex-end: items packed to end of container
center: items centered in container
space-between: items evenly distributed from start to end of container
space-around: items evenly distributed with equal space around each line
space-evenly: items are evenly distributed with equal space around them
stretch: lines stretch to take up space

.container {
  align-content: (value here)
}

7. gaps The gap property handles the space between flex items. It only applies between items, and doesn't affect edges.

you can declare:
gap: 20px (default)
gap: 20px 20px (row-gap then column-gap)
row-gap: 20px
column-gap: 20px

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px;
  row-gap: 10px;
  column-gap: 20px;
}

Child properties:

1. order This can control the order items appear in the flex container. If items have the same order, they default to their source order.

.item {
  order: 5;
}

2. flex-grow This defines the flex item's ability to grow if necessary. The value is a proportion.

For example, if all items had a value of 1, the space would be distributed equally between the children. If one item had a 2, it would take up twice the allotted space of all other items.

.item {
  flex-grow: 4;
}

3. flex-shrink This is the opposite of grow, and allows items to shrink if necessary

.item {
  flex-shrink: 3;
}

3. align-self This allows the default alignment (the one in align-items in the parent) to be overridden in a specific item

.item {
  align-self: auto (OR) flex-start (OR) flex-end (OR) center (OR) baseline (OR) stretch;
}

It can take awhile to get a hang of the flexbox, but it's worth it!

Check out this amazing visual guide to CSS flexbox here!