Pricing cards
Build the pricing cards layout with flexbox.
Pricing cards layout
In the pricing section we want to show plans (free, pro, enterprise) stacked vertically. The .pricing container should lay out its children top to bottom. The flex-direction property sets the layout direction; column stacks children vertically.
The default direction is row (horizontal), so for a vertical stack we must explicitly write flex-direction: column. Then we can align with justify-content and align-items.
Alignment in a vertical container
In a vertical container the axes swap. With flex-direction: column, the main axis becomes vertical and the cross axis horizontal. The properties still work the same way.
justify-content: center centers the cards vertically; align-items: center centers them horizontally. This way the pricing cards align both ways and the layout looks clean.
Depth with box-shadow
To make the pricing card stand out, let's add a shadow. The box-shadow property draws a shadow behind an element's box. Its simplest form takes a horizontal offset, a vertical offset, and a blur value.
For example, box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) gives a soft shadow shifted slightly down. The card looks as if it's slightly lifted from the background, and the eye follows the layout easily. Now let's add the pricing section to the file.
Exercise Add the .pricing and .price-card rules
Take the file with all the rules from the previous lesson. Below it, add two rules:
- A
.pricingclass selector with display: flex, flex-direction: column, justify-content: center, and align-items: center. - A
.price-cardclass selector with box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1).
End each declaration with a semicolon.
Show example solution
/* TaskFlow landing page */
.hero {
display: flex;
justify-content: center;
align-items: center;
background-color: #1a2b4a;
}
.features {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.feature-card {
flex-grow: 1;
border-radius: 8px;
}
.pricing {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.price-card {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}Test yourself
-
What does flex-direction: column do?
- Lays out children horizontally
- Hides the items
- Centers the container
- Stacks children vertically top to bottom
Show answer
Stacks children vertically top to bottom — Correct. flex-direction: column stacks children vertically, one below another.
-
Complete the align-items value
.pricing { display: flex; flex-direction: column; align-items: ____; justify-content: center; }Show answer
.pricing { display: flex; flex-direction: column; align-items: center; justify-content: center; } -
Match properties to their meanings
- flex-direction: column
- Stacks items vertically
- justify-content: center
- Centers on main axis
- align-items: center
- Centers on cross axis
- box-shadow
- Adds depth to card