CSS Full Course Day 8 [Hindi] 💻 | Flexbox Basics in Hindi 🚀 | Mohit Decodes

📐 CSS Tutorial – Day 8: Flexbox Basics

Welcome to Day 8 of the CSS Full Course [Hindi] by Mohit Decodes! Today, we’ll learn about the Flexbox layout — a powerful and flexible way to arrange items within a container.

🔹 What is Flexbox?

Flexbox (Flexible Box) is a CSS layout module designed to help you distribute space and align items inside a container — even when their size is unknown or dynamic.

🔹 Flex Container and Flex Items

  1. Flex Container: The parent element with display: flex
  2. Flex Items: The direct children inside the flex container

🔹 Basic Flexbox Properties

Property (on container)Description
display: flex;Enables flex layout
flex-directionDirection of items (row, column, etc.)
justify-contentAlign items horizontally (flex-start, center, space-between)
align-itemsAlign items vertically (stretch, center, flex-start)
flex-wrapWrap items to next line if needed (nowrap, wrap)


⚙️ Example CSS:

css
CopyEdit
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 150px;
background-color: #f0f0f0;
}

.item {
background-color: #4CAF50;
color: white;
padding: 20px;
margin: 10px;
font-size: 18px;
}

💡 Why Use Flexbox?

  1. Responsive and easy to align elements
  2. Controls spacing between items dynamically
  3. Simplifies complex layouts compared to floats or positioning