CSS Flexbox


🔹 What is Flexbox in CSS?

Flexbox, or the Flexible Box Layout, is a one-dimensional layout model in CSS that provides an efficient way to lay out, align, and distribute space among items in a container — even when their size is unknown or dynamic.

It is ideal for designing responsive layouts, navigation bars, card layouts, and more.


🔸 Key Concepts of Flexbox

  • Works in one dimension – row or column.

  • Uses a flex container and flex items.

  • Provides easy alignment (horizontal/vertical).

  • Automatically adjusts to different screen sizes.


🔸 Basic Syntax

HTML:
<div class="flex-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
CSS:
.flex-container {
  display: flex;
}

🔸 Main Properties (Flex Container)

Property Description
display: flex Enables flexbox on a container
flex-direction Row (default) or column
flex-wrap Allows wrapping of items
justify-content Aligns items horizontally
align-items Aligns items vertically
align-content Aligns rows when wrapped

🔸 Common Values of Flexbox Properties

flex-direction
flex-direction: row | row-reverse | column | column-reverse;
justify-content
justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly;
align-items
align-items: stretch | flex-start | center | flex-end | baseline;

🔸 Example: Horizontal Centering

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 1px solid #000;
}

Practice Questions

✅ Write CSS for the following:

Q1. Create a flex container with three items in a row.

Q2. Center all items both horizontally and vertically.

Q3. Change direction to column.

Q4. Add space between items using justify-content.

Q5. Make items wrap to the next line using flex-wrap.

Q6. Align items to the bottom using align-items.

Q7. Reverse the order of items.

Q8. Create equal-width cards using flex: 1.

Q9. Combine flex-direction: column with vertical centering.

Q10. Make a responsive navigation bar using Flexbox.


Go Back Top