Flex Container


🔹 What is a Flex Container?

A Flex Container is the parent element in a flexbox layout that holds flex items. By setting display: flex or display: inline-flex on an element, it becomes a flex container, and its direct children automatically become flex items.

The flex container controls the flow, direction, alignment, spacing, and wrapping of the items inside it.


🔸 Declaring a Flex Container

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

🔸 Main Properties of Flex Container

Property Description
display Defines flex behavior: flex or inline-flex
flex-direction Sets the direction of items (row, column, etc.)
flex-wrap Controls whether items wrap or stay in one line
flex-flow Shorthand for flex-direction and flex-wrap
justify-content Aligns items horizontally within the container
align-items Aligns items vertically within the container
align-content Aligns multi-line rows (used with wrapping)

🔸 Example: Flex Container with Centered Items

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #f2f2f2;
}

🔸 Example: Horizontal and Vertical Layouts

/* Horizontal */
.container {
  display: flex;
  flex-direction: row;
}

/* Vertical */
.container {
  display: flex;
  flex-direction: column;
}

🔸 Flex Container with Wrapping

.container {
  display: flex;
  flex-wrap: wrap;
}

Practice Questions

✅ Write CSS for the following:

Q1. Create a flex container with horizontal layout.

Q2. Create a flex container with vertical layout.

Q3. Make a container that allows its items to wrap.

Q4. Center items in the middle of the container.

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

Q6. Space items equally using justify-content.

Q7. Reverse the order of items.

Q8. Create a container using inline-flex.

Q9. Set different wrap and direction using flex-flow.

Q10. Add spacing between rows using align-content.


Go Back Top