CSS Flexbox: The Guide for Those in a Hurry

🎯 Key Concepts

• Container (Parent): Element that receives display: flex;. Manages the layout of its children.

• Item (Child): Elements directly inside the flex container. They are organized by the container.

• Main Axis: Default direction of items (row by default, but can be column). Controlled by flex-direction.

• Cross Axis: Perpendicular to the main axis. Controlled by align-items and align-content.

• Flexibility: Ability of items to grow (flex-grow), shrink (flex-shrink) or have a base size (flex-basis).

📝 Essential Syntax

/* On the Container (Parent) */
.flex-container {
  display: flex; /* Defines as flex container */

  /* Direction of items */
  flex-direction: row; /* default: row (horizontal) */
  /* flex-direction: column; vertical line (column) */

  /* Line wrapping */
  flex-wrap: wrap; /* allows line wrapping */
  /* flex-wrap: nowrap; does not wrap (default) */

  /* Shorthand for flex-direction and flex-wrap */
  flex-flow: row wrap;

  /* Alignment on the Main Axis */
  justify-content: flex-start; /* start (default) */
  /* justify-content: flex-end; end */
  /* justify-content: center; center */
  /* justify-content: space-between; space between */
  /* justify-content: space-around; space around */
  /* justify-content: space-evenly; space evenly */

  /* Alignment on the Cross Axis (single line) */
  align-items: stretch; /* stretches (default) */
  /* align-items: flex-start; start */
  /* align-items: flex-end; end */
  /* align-items: center; center */
  /* align-items: baseline; aligns by baseline */

  /* Alignment on the Cross Axis (multiple lines) */
  align-content: stretch; /* stretches (default) */
  /* align-content: flex-start; */
  /* align-content: flex-end; */
  /* align-content: center; */
  /* align-content: space-between; */
  /* align-content: space-around; */
}

/* On the Items (Children) */
.flex-item {
  /* Item growth (factor) */
  flex-grow: 1; /* occupies available space */
  /* flex-grow: 0; does not grow (default) */

  /* Item shrinkage (factor) */
  flex-shrink: 1; /* shrinks if necessary (default) */
  /* flex-shrink: 0; does not shrink */

  /* Base size of the item before growing/shrinking */
  flex-basis: auto; /* width/height of content (default) */
  /* flex-basis: 100px; */

  /* Shorthand for flex-grow, flex-shrink, and flex-basis */
  flex: 0 1 auto; /* does not grow, shrinks, auto-base */
  /* flex: 1; (equivalent to flex: 1 1 0%) */
  /* flex: auto; (equivalent to flex: 1 1 auto) */
  /* flex: none; (equivalent to flex: 0 0 auto) */

  /* Individual order of items */
  order: 0; /* default */
  /* order: 1; */

  /* Individual alignment on the Cross Axis */
  align-self: auto; /* inherits from container (default) */
  /* align-self: flex-start; */
  /* align-self: flex-end; */
  /* align-self: center; */
}

⚡ Quick Commands

• display: flex;: Makes the element a flex container.

• justify-content: center;: Centers items on the main axis.

• align-items: center;: Centers items on the cross axis (in a single line).

• flex-direction: column;: Changes the direction of items to vertical.

• flex-wrap: wrap;: Allows items to wrap to the next line/column.

• flex: 1;: Item grows, shrinks, and has a base of 0 (great for filling space).

🔧 Use Cases

1. Basic Case: Simple Horizontal and Vertical Alignment

   html

   <div class="container">
     <div class="item">Conteúdo</div>
   </div>

   css

   .container {
     display: flex;
     justify-content: center; /* Centers horizontally */
     align-items: center;     /* Centers vertically */
     height: 100vh; /* Example to see the effect */
   }

2. Intermediate Case: Responsive Navigation Layout

   html

   <nav class="navbar">
     <a href="#">Home</a>
     <a href="#">Sobre</a>
     <a href="#">Contato</a>
   </nav>

   css

   .navbar {
     display: flex;
     justify-content: space-around; /* Distributes links equally */
     flex-wrap: wrap; /* Allows line wrapping on smaller screens */
     background-color: #eee;
     padding: 10px;
   }
   .navbar a {
     padding: 8px 15px;
     text-decoration: none;
     color: #333;
   }

3. Advanced Case: Simple Grid System (3 flexible columns)

   html

   <div class="grid-container">
     <div class="col">Coluna 1</div>
     <div class="col">Coluna 2</div>
     <div class="col">Coluna 3</div>
   </div>

   css

   .grid-container {
     display: flex;
     flex-wrap: wrap; /* Allows columns to wrap */
     gap: 20px;       /* Space between columns */
   }
   .col {
     flex: 1 1 calc(33.333% - 20px); /* 3 columns, shrink, base of 1/3 minus the gap */
     min-width: 250px; /* Columns don't get too small */
     background-color: lightblue;
     padding: 15px;
     text-align: center;
   }
   /* For very small screens, one column per line */
   @media (max-width: 600px) {
     .col {
       flex: 1 1 100%;
     }
   }

🚨 Common Pitfalls

• display: flex; only works on the direct parent: Flexbox properties applied to the container only affect its direct children.

• Height of the flex-container: For align-items: center; to work vertically, the container needs a defined height (e.g., height: 100vh; or a fixed value).

• margin: auto; on flex items: Using margin: auto; on a flex item can be powerful for pushing other items or centering a specific item within the main/cross axis.

• width and height vs flex-basis: flex-basis generally overrides width (on the main axis) and height (on the cross axis) on flex items. Use flex-basis to define the preferred initial size.

• flex-wrap: nowrap; with overflow: If you don't use flex-wrap: wrap;, items will try to stay on a single line and may overflow the container.