课程: Advanced Responsive Layouts with CSS Flexbox

今天就学习课程吧！

今天就开通帐号，24,700 门业界名师课程任您挑！

Using Flexbox to create a grid of cards

Using Flexbox to create a grid of cards - CSS教程

课程: Advanced Responsive Layouts with CSS Flexbox

开始一个月试用 购买团队方案

Using Flexbox to create a grid of cards

“

- To display our cards in a grid pattern, we need to change the display property of the container that holds all of the cards. And in our markup, that container is this section here with the class "cards" and we need to change its display property to flex, just like we've done in the previous chapter. Going to cardstyles.css, I'm gonna scroll to the bottom make some space here so I can see what I'm doing. Then add in the comments, flexbox stuff, and then I'm gonna target .cards. Here I'm gonna use almost exactly the same kind of CSS markup we used when we laid out our menus because flexbox only has to do with layout, it doesn't have to do with what the items actually look like so you can use the same flexbox markup for different types of designs. I'll start by setting up display: flex; and then I'm going to set to justify-content: space-between; which I'll explain in a second. I'm gonna leave out flex wrap for now because I want to show you what happens if I don't put it in. Save it…

内容