From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Change the appearance of cards with flex

Change the appearance of cards with flex - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

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…

Contents