Flex It Like a Pro: A Beginner's Guide to CSS Flexbox

CSS Flexbox, short for "CSS Flexible Box Layout," is a layout model in CSS designed to create more efficient and flexible ways to organize and arrange elements in a container.

Unlike traditional CSS layouts that rely on block and inline directions, Flexbox is based on a single direction (either horizontal or vertical), making it easier to control the alignment and distribution of space among items in a container.

Basic and Terminology

Here's a figure to illustrate the main idea behind the flex layout:

Main Axis: The main direction in which flex items are arranged in the container (left-to-right or top-to-bottom).
Main Start | Main End: The start and end points of the main axis.
Cross Axis: The direction perpendicular to the main axis.
Cross Start | Cross End: The start and end points of the cross axis.
Main Size: The size of a flex item in the main axis (width or height).
Cross Size: The size of a flex item in the cross axis (width or height).

---

Flexbox Properties

Properties for the Parent (Flex Container):

1. display
To enable Flexbox, set the display property of the container to flex or inline-flex. The flex value creates a block-level flex container, while inline-flex creates an inline-level flex container.

div {
    display: flex;
}

2. flex-direction
This property sets the direction of the flex items.
The possible values are :

1. row (default)
2. row-reverse
3. column
4. column-reverse

div {
  flex-direction: row | row-reverse | column | column-reverse;
}

3. flex-wrap
It determines if flex items wrap onto multiple lines
The possible values are :

1. nowrap (default)
2. wrap
3. wrap-reverse

.div {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

4. Justify content
This property aligns flex items along the main axis.
The possible values are :

1. flex-start (default)
2. flex-end
3. center
4. space-between
5. space-around
6. space-evenly

div {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

5. align-items
This property aligns flex items along the cross axis.
The possible values are :

1. flex-start (default)
2. flex-end
3. center
4. baseline

div {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

6. align-content
Aligns lines of flex items when there is extra space in the cross axis.
The possible values are :

1. flex-start (default)
2. flex-end
3. center
4. space-between
5. space-around
6. space-evenly

div {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

7. gap, row-gap, column-gap
Explicitly controls the space between flex items.

.div {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

Properties for the Child (Flex items):

1. order
Sets the order of flex items. Default is 0.

.item1 {
    order: 2;
}

2. flex-grow
Controls how much a flex item should grow relative to its siblings. Default is 0.

.item2 {
    flex-grow: 2;
}

3. flex-shrink
Controls how much a flex item should shrink relative to its siblings. Default is 1.

.item2 {
    flex-shrink: 0;
}

4. align-self
Allows flex items to override the container’s align-items property.

.item {
    align-self: center;
}

5. flex-basis
Sets the initial size of a flex item before growing or shrinking.

.item2 {
    flex-basis: 2;
}

---

More Information

CSS Flexible Box Layout Module Level 1 (W3C): The official specification for CSS Flexbox.
A CSS Flexbox Cheatsheet (DigitalOcean): A handy guide with examples and explanations.
Centering Things in CSS With Flexbox (DigitalOcean): A tutorial on using Flexbox for centering elements.

That's it! You're now equipped with a strong foundation in CSS Flexbox. Let me know if you have any questions or if you need further assistance!

Happy coding! 😊