Embedded Files
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.
display: flex changes an element to a block-level container with flex items inside of it.
display: inline-flex allows multiple flex containers to appear inline with each other.
justify-content is used to space items along the main axis.
align-items is used to space items along the cross axis.
flex-grow is used to specify how much space (and in what proportions) flex items absorb along the main axis.
flex-shrink is used to specify how much flex items shrink and in what proportions along the main axis.
flex-basis is used to specify the initial size of an element styled with flex-grow and/or flex-shrink.
flex is used to specify flex-grow, flex-shrink, and flex-basis in one declaration.
flex-wrap specifies that elements should shift along the cross axis if the flex container is not large enough.
align-content is used to space rows along the cross axis.
flex-direction is used to specify the main and cross axes.
flex-flow is used to specify flex-wrap and flex-direction in one declaration.
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
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.
Inside the .cards ruleset, add a display property with a value of flex.
2.Now, inside the .cards ruleset, set the flex-wrap property to have a value of wrap.
3.Inside the .cards ruleset, set the justify-content property to have a value of space-around.
4.In the .col ruleset, set the display property to have a value of inline-flex.
5.In the .col ruleset, set the flex-direction property to have a value of column.
6.In the .col ruleset, set the justify-content property to have a value of space-between.
Page updated
Report abuse