This content originally appeared on DEV Community and was authored by Vigneshwaralingam
❓ What is Flexbox?
Flexbox (Flexible Box Layout) is a one-dimensional layout system in CSS used to align and distribute space among items inside a container. It works in either a row or a column, but not both at the same time.
🕒 When to Use Flexbox?
Use Flexbox when:
- You want to align elements horizontally or vertically
- You want to space items evenly
- You need to build responsive layouts
- You want easy alignment without using floats or position
💡 Why is Flexbox Important?
- It simplifies layout design
- Handles resizing and spacing automatically
- Replaces old hacks like
float,inline-block, andpositioning - Great for navbars, cards, buttons, galleries, footers, and more
🔍 Which Properties Does Flexbox Use?
➤ Container Properties:
display: flex;flex-directionjustify-contentalign-itemsflex-wrapgap
➤ Item Properties:
flexalign-selforder-
flex-grow,flex-shrink,flex-basis
⚙️ How to Use Flexbox?
🧱 Step 1: Make a container a flex container
.container {
display: flex;
}
🧱 Step 2: Apply other Flexbox properties to control layout
📊 Flexbox Differences Table
| Property | Description | Common Values |
|---|---|---|
flex-direction |
Direction of items |
row, column, row-reverse, column-reverse
|
justify-content |
Horizontal alignment of items |
flex-start, center, space-between, space-around, space-evenly
|
align-items |
Vertical alignment (cross-axis) |
flex-start, center, stretch, baseline
|
flex-wrap |
Whether items wrap or not |
nowrap, wrap, wrap-reverse
|
align-self |
Align a single item | Same as align-items, but per item |
order |
Rearranges item order | Number (e.g., order: 2) |
gap |
Adds space between flex items | e.g., gap: 10px
|
📌 Examples of Flexbox Use
🔹 Example 1: Center Items
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
🔹 Example 2: Horizontal Navbar
.navbar {
display: flex;
justify-content: space-between;
padding: 10px;
}
🔹 Example 3: Wrap Cards
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
🔹 Example 4: Column Layout
.sidebar {
display: flex;
flex-direction: column;
align-items: flex-start;
}
🧠 Interview Questions & Answers – CSS Flexbox
✅ 1. What is Flexbox?
Answer:
Flexbox is a one-dimensional layout system in CSS used to align and space items in a container, either in a row or column.
✅ 2. What’s the difference between justify-content and align-items?
Answer:
-
justify-content: aligns items along the main axis (row or column) -
align-items: aligns items along the cross axis
✅ 3. How do you center an element both horizontally and vertically using Flexbox?
Answer:
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
✅ 4. What is the default flex-direction?
Answer:
row — items are placed left to right horizontally.
✅ 5. What is flex-wrap, and when would you use it?
Answer:
flex-wrap allows items to wrap onto multiple lines instead of overflowing. Useful in responsive grids and card layouts.
.container {
flex-wrap: wrap;
}
✅ 6. What does flex: 1 mean?
Answer:
flex: 1 is a shorthand for:
flex-grow: 1flex-shrink: 1flex-basis: 0
It means the element will grow to fill available space equally with other flex items.
✅ 7. How do you control spacing between Flex items?
Answer:
Use gap, margin, or justify-content:
.container {
display: flex;
gap: 20px;
}
✅ 8. What is the use of order in Flexbox?
Answer:
It changes the visual order of items, without changing the HTML structure.
✅ 9. What happens if one item has flex-grow: 2 and others have flex-grow: 1?
Answer:
That item will take twice as much space as the others.
✅ 10. Can Flexbox and Grid be used together?
Answer:
Yes. You can use Flexbox for one-dimensional layouts inside Grid areas or vice versa. Combining both gives powerful layout control.
This content originally appeared on DEV Community and was authored by Vigneshwaralingam
Vigneshwaralingam | Sciencx (2025-06-11T17:25:18+00:00) 💪 CSS Flexbox — What, When, Why, Which, How, Differences, Examples, and Interview Q\&A. Retrieved from https://www.scien.cx/2025/06/11/%f0%9f%92%aa-css-flexbox-what-when-why-which-how-differences-examples-and-interview-qa/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.