CSS Tutorial

CSS Flexbox

Flexbox is a layout model that allows responsive alignment, spacing, and ordering of elements within a container. It's perfect for designing flexible and responsive layouts.

📐 Syntax:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

🧪 Live Example:

🔧 Common Properties:

• display: flex; → enables flexbox on the container
• justify-content: → aligns items horizontally
• align-items: → aligns items vertically
• flex-wrap: → allows items to wrap to next line
• flex: → defines item flexibility
• order: → sets the order of items

📱 Responsive Layout Tip:

Use flex-wrap: wrap and set item widths in % to make the layout responsive.