Learn
Flexbox
Review: Flexbox

You should be proud of yourself! You have learned the most important properties of flexbox. Flexbox is an art and a science; you can use it to make laying out multiple elements a piece of cake. You know everything necessary to begin using it in your own projects.

  1. display: flex changes an element to a block-level container with flex items inside of it.
  2. display: inline-flex allows multiple flex containers to appear inline with each other.
  3. justify-content is used to space items along the main axis.
  4. align-items is used to space items along the cross axis.
  5. flex-grow is used to specify how much space (and in what proportions) flex items absorb along the main axis.
  6. flex-shrink is used to specify how much flex items shrink and in what proportions along the main axis.
  7. flex-basis is used to specify the initial size of an element styled with flex-grow and/or flex-shrink.
  8. flex is used to specify flex-grow, flex-shrink, and flex-basis in one declaration.
  9. flex-wrap specifies that elements should shift along the cross axis if the flex container is not large enough.
  10. align-content is used to space rows along the cross axis.
  11. flex-direction is used to specify the main and cross axes.
  12. flex-flow is used to specify flex-wrap and flex-direction in one declaration.
  13. Flex containers can be nested inside of each other by declaring display: flex or display: inline-flex for children of flex containers.

Let’s apply a few of the properties you’ve learned to arrange one section of the web page in the browser to the right!

Instructions

1.

All of the images are inside of three column divs and the three column divs are all inside of one large div called .cards.

Set the display property of .cards to flex.

2.

Now set the flex-wrap property of .cards to wrap.

3.

Set the justify-content property of .cards to space-around.

4.

Set the display property of .col to inline-flex.

5.

Set the flex-direction property of .col to column.

6.

Assign .col a justify-content value of space-between.

Folder Icon

Take this course for free

Already have an account?