Flexible Box Layout

Flexbox is a one-dimensional layout method for arranging items in rows or columns.

Items flex (expand) to fill additional space or shrink to fit into smaller spaces.

/* Flex Container */
.container {
  display: flex;
  justify-content: center;  /* Horizontal alignment */
  align-items: center;      /* Vertical alignment */
  gap: 10px;                /* Space between items */
}

/* Flex Direction */
.column {
  display: flex;
  flex-direction: column;
}

/* Flex Items */
.item {
  flex: 1;  /* Grow to fill space */
}

• display: flex - Creates flex container
• flex-direction - row, column, row-reverse, column-reverse
• justify-content - Horizontal alignment
• align-items - Vertical alignment
• gap - Space between flex items
• flex - Shorthand for flex-grow, flex-shrink, flex-basis

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>