✅ Module 6: CSS Flexbox (📦➡️)

📦 Module 6: CSS Flexbox

Flexbox (short for Flexible Box Layout) is a modern CSS layout module designed for building one-dimensional layouts — either rows or columns. It simplifies the process of aligning items and distributing space within a container, even when their sizes are dynamic. 📏

🔹 Activating Flexbox

.container {
  display: flex;
}
  

Once display: flex is applied to a container, all of its children become flex items. The container is called a flex container.

📐 Main Axis vs Cross Axis

• Main Axis: Direction in which flex items are laid out (default is left to right).
• Cross Axis: Perpendicular to the main axis.

⚙️ Flex Container Properties

• flex-direction: row | row-reverse | column | column-reverse
• justify-content: flex-start | center | space-between | space-around
• align-items: stretch | center | flex-start | flex-end | baseline
• align-content: Like align-items, but for multiple rows
• flex-wrap: nowrap (default) | wrap | wrap-reverse

🎯 Flex Item Properties

• order: Controls order of display
• flex-grow: Item can grow if space is available
• flex-shrink: Item can shrink if needed
• flex-basis: Initial size of item
• align-self: Overrides container’s align-items for one item

💡 Real Example

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box {
  flex: 1;
  margin: 10px;
}
  

✅ Summary

• Flexbox is perfect for one-dimensional layouts (horizontal or vertical).
• Provides easy alignment and spacing solutions.
• Useful for navbars, cards, footers, and responsive rows. 📲