CSS Flexbox: The Guide for Those in a Hurry

Learn the pillars of CSS Flexbox in record time. A guide focused on the essential syntax and alignments you actually use daily, without fluff and straight to the code.

Equipe Blueprintblog22 de mar. de 20266 min

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).

Um diagrama que ilustra um container flex com vários itens. Setas indicariam o 'Eixo Principal' (horizontal por padrão) e o 'Eixo Cruzado' (vertical por padrão). O diagrama deveria rotular claramente o 'Container' e os 'Itens' filhos, mostrando a relação hierárquica e a orientação dos eixos.

📝 Essential Syntax

Um conjunto de pequenos diagramas ou ilustrações que demonstram visualmente os efeitos de diferentes valores para `justify-content` (como `flex-start`, `center`, `space-between`) e `align-items` (como `flex-start`, `center`, `stretch`) em um container com alguns itens. Cada diagrama teria um título com a propriedade CSS aplicada.

css

/* 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

Basic Case: Simple Horizontal and Vertical Alignment
Intermediate Case: Responsive Navigation Layout
Advanced Case: Simple Grid System (3 flexible columns)

🚨 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.