🤸‍♂️ Intro to Flexbox

Flexbox is a modern CSS layout model that makes it super easy to build flexible, responsive layouts. It helps you align, space, and distribute items inside a container — vertically or horizontally.

🚀 Getting Started

To activate Flexbox, apply display: flex to a container.

.container {
  display: flex;
}

Once Flexbox is active, the container can control how its children are laid out. Here are the key properties:

📏 Main Container Properties

• justify-content: Aligns items horizontally (start, end, center, space-between, etc.)
• align-items: Aligns items vertically (start, center, stretch, etc.)
• flex-direction: Changes layout direction (row, column, row-reverse, column-reverse)
• gap: Adds spacing between flex items

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

🧱 Flex Item Properties

Each child of a flex container (aka a flex item) can have individual layout control:

• flex-grow: Let the item grow to fill available space
• flex-shrink: Allow the item to shrink when space is tight
• flex-basis: Set the item’s initial size

💡 Why Use Flexbox?

• No more float hacks or table layouts
• Perfect for navbars, cards, and multi-column layouts
• Flexible, dynamic, and clean

✅ Quick Flex Container Example

.flex-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
}

In the next lesson, We'll go deeper Into how flexbox works