From the course: CSS: Advanced Layouts with Grid
Unlock the full course today
Join today to access over 23,200 courses taught by industry experts.
Change the appearance of cards with flex - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
Change the appearance of cards with flex
- [Instructor] Now that the cards are stacking the way they are supposed to, we can turn our attention to stylistic elements. So there are a couple of things I want to change here, and there's also a pesky problem that needs to be resolved. The first change is I want to move the fig caption from the top of the box down to the bottom. And this is the perfect example of where Grid and Flexbox work really well together. Grid ensures that the caption takes up the full available space inside the cell. So it's expanding all the way from the top to the bottom. Now I can use Flex and align items to align the actual text to the bottom of the flexbox without changing the span of this box. So I'll grab the fig caption class caption, find a rule for it down here, and then say displaying flex. And then I'll use align items and set align items to flex end. That grabs any item inside the flexbox and just positions it at the end of the flexbox, which is at the bottom. Clean, straight forward, and…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
(Locked)
The challenge48s
-
(Locked)
Overview of text-based card markup2m 10s
-
(Locked)
Create a grid for each card2m 21s
-
(Locked)
Position items on the grid4m 20s
-
(Locked)
Place the cards on a grid5m 17s
-
(Locked)
Overview of image-based card markup2m 21s
-
(Locked)
Using the grid to stack grid items2m 18s
-
(Locked)
Change the appearance of cards with flex5m 43s
-
(Locked)
Create different-sized grid items2m 10s
-
(Locked)
Create a complex magazine-style grid8m 43s
-
(Locked)
-
-
-