Flexbox
## Learning Objectives
- Understand flexbox layout model
- Master flex container properties
- Master flex item properties
- Create common layouts with flexbox
## Flexbox Overview
Flexbox is a one-dimensional layout method for arranging items in rows or columns.
```html
```
```css
.container {
display: flex;
}
```
## Flex Container Properties
### display
```css
.container {
display: flex; /* Creates flex container */
display: inline-flex; /* Inline flex container */
}
```
### flex-direction
```css
.container {
flex-direction: row; /* Left to right (default) */
flex-direction: row-reverse; /* Right to left */
flex-direction: column; /* Top to bottom */
flex-direction: column-reverse; /* Bottom to top */
}
```
### flex-wrap
```css
.container {
flex-wrap: nowrap; /* No wrapping (default) */
flex-wrap: wrap; /* Items wrap to next line */
flex-wrap: wrap-reverse; /* Items wrap in reverse */
}
```
### justify-content
Aligns items on the main axis (horizontal by default):
```css
.container {
justify-content: flex-start; /* Items at start (default) */
justify-content: flex-end; /* Items at end */
justify-content: center; /* Items centered */
justify-content: space-between; /* First/last at edges, space distributed */
justify-content: space-around; /* Equal space around each item */
justify-content: space-evenly; /* Equal space between all items */
}
```
### align-items
Aligns items on the cross axis (vertical by default):
```css
.container {
align-items: stretch; /* Fill container height (default) */
align-items: flex-start; /* Items at top */
align-items: flex-end; /* Items at bottom */
align-items: center; /* Items centered vertically */
align-items: baseline; /* Items aligned by text baseline */
}
```
### align-content
Aligns multiple rows when there's extra space on the cross axis:
```css
.container {
align-content: flex-start; /* Rows at top */
align-content: flex-end; /* Rows at bottom */
align-content: center; /* Rows centered */
align-content: space-between; /* First/last at edges */
align-content: space-around; /* Equal space around rows */
align-content: stretch; /* Stretch rows (default) */
}
```
### gap
```css
.container {
gap: 20px; /* Row and column gap */
gap: 10px 20px; /* Row gap, column gap */
row-gap: 10px;
column-gap: 20px;
}
```
## Flex Item Properties
### flex-grow
```css
.item {
flex-grow: 1; /* Item grows to fill available space */
}
.item:first-child {
flex-grow: 2; /* This item gets twice the growth */
}
```
### flex-shrink
```css
.item {
flex-shrink: 0; /* Item won't shrink */
flex-shrink: 1; /* Item shrinks (default) */
}
```
### flex-basis
```css
.item {
flex-basis: 200px; /* Initial size before growing/shrinking */
}
```
### flex (Shorthand)
```css
.item {
flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
flex: 2; /* flex-grow: 2, flex-shrink: 1, flex-basis: 0% */
flex: 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
flex: 1 1 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
}
```
### align-self
```css
.item {
align-self: auto; /* Inherit from container (default) */
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: stretch;
}
```
### order
```css
.item {
order: 0; /* Default order */
}
.item:first-child {
order: 1; /* Moves to end */
}
.item:last-child {
order: -1; /* Moves to start */
}
```
## Common Layouts
### Navigation Bar
```css
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: #333;
color: white;
}
.nav-links {
display: flex;
gap: 20px;
list-style: none;
}
.nav-links a {
color: white;
text-decoration: none;
}
```
### Card Layout
```css
.cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px; /* Grow, shrink, min-width 300px */
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}
```
### Centering
```css
.center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
```
### Sticky Footer
```css
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1; /* Takes remaining space */
}
.footer {
padding: 20px;
background: #333;
color: white;
}
```
### Form Layout
```css
.form-row {
display: flex;
gap: 20px;
margin-bottom: 15px;
}
.form-row label {
flex: 0 0 100px; /* Fixed width label */
}
.form-row input {
flex: 1; /* Input takes remaining space */
}
```
## Responsive Flexbox
```css
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.item {
flex: 1 1 300px; /* Stack on small screens */
}
@media (min-width: 768px) {
.item {
flex: 0 0 calc(50% - 10px); /* Two columns */
}
}
@media (min-width: 1024px) {
.item {
flex: 0 0 calc(33.333% - 14px); /* Three columns */
}
}
```
## Browser Support
Flexbox is supported in all modern browsers.
```css
.container {
display: -webkit-box; /* Old Safari */
display: -webkit-flex; /* Old Chrome, Safari */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Standard */
}
```
## Summary
- Flexbox: one-dimensional layout with `display: flex`
- Container properties: flex-direction, flex-wrap, justify-content, align-items, align-content, gap
- Item properties: flex-grow, flex-shrink, flex-basis, flex, align-self, order
- `justify-content`: main axis alignment
- `align-items`: cross axis alignment
- `flex: 1` makes item grow to fill space
- Common use cases: navigation, card layouts, centering, sticky footer
1
2
3
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →