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

   HTMLCopiar

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

   CSSCopiar

   .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

   HTMLCopiar

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

   CSSCopiar

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

   HTMLCopiar

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

   CSSCopiar

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