Web Development - CSS Flexbox
CSS Flexbox
The CSS Flexible Box Layout (or Flexbox) makes it easy to design flexible, responsive layout structures that adapt to different screen sizes.
What is Flexbox?
Flexbox is a layout model that arranges elements in rows or columns and automatically adjusts their size to fit the available space.
- Items can stretch or shrink to fill space.
- You can align and distribute space between items easily.
- Works great for navigation bars, cards, and responsive grids.
Example
Basic Flexbox container:
.container {
display: flex;
background-color: lightgray;
}
.item {
background-color: coral;
margin: 10px;
padding: 20px;
color: white;
}
Try it Yourself »
Flex Container and Flex Items
A Flexbox layout consists of a container and one or more flex items.
- Set
display: flex;on the parent element (the container). - All direct children become flex items.
Flex Direction
The flex-direction property defines the direction of the items inside the container.
row(default) - items are placed left to right.row-reverse- right to left.column- top to bottom.column-reverse- bottom to top.
Example
Changing direction:
.container {
display: flex;
flex-direction: row-reverse;
}
Try it Yourself »
Justify Content
The justify-content property aligns items along the main axis (horizontal by default).
flex-start- items at the start (default).center- items centered.flex-end- items at the end.space-between- even spacing between items.space-around- equal space around each item.
Example
Centering items horizontally:
.container {
display: flex;
justify-content: center;
}
Try it Yourself »
Align Items
The align-items property aligns items vertically (along the cross axis).
stretch(default)flex-startcenterflex-endbaseline
Example
Centering items vertically:
.container {
display: flex;
align-items: center;
height: 200px;
background-color: lightgray;
}
Try it Yourself »
Align Content
If items wrap into multiple lines, align-content controls vertical spacing between lines.
stretch(default)centerflex-startflex-endspace-betweenspace-around
Flex Wrap
By default, items try to fit on one line. Use flex-wrap to allow wrapping.
Align Self
Individual items can override vertical alignment using align-self.
Example
Different alignments per item:
.item1 { align-self: flex-start; }
.item2 { align-self: center; }
.item3 { align-self: flex-end; }
Try it Yourself »
flex-grow, flex-shrink, and flex-basis
These properties control how flex items resize inside a flex container:
flex-grow- how much an item can grow relative to others.flex-shrink- how much it can shrink.flex-basis- the default size before growing/shrinking.
Example
Flexible item growth:
.item1 { flex-grow: 1; }
.item2 { flex-grow: 2; }
.item3 { flex-grow: 1; }
Try it Yourself »
flex Shorthand
You can combine flex-grow, flex-shrink, and flex-basis into one line:
Flexbox Centering Example
Flexbox makes centering items (both horizontally and vertically) very easy:
Example
Perfectly centered box:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background: lightgray;
}
Try it Yourself »
Best Practices
- Use Flexbox for one-dimensional layouts (rows or columns).
- Use
justify-contentandalign-itemsto control alignment. - Use
flex-wrapfor responsive rows. - Use
flex: 1;to make items share equal space.
Next, you'll learn about CSS Grid - a powerful system for creating two-dimensional layouts with rows and columns.
