Embedded Files
Essential Question: How can I use flex containers to format my page?
Mastery Objectives:
SWBAT use flex containers to format their web page.
SWBAT format their web pages so that the page looks good on every device.
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.
div.container {
display: flex;
}
Directions:
In the <div> with id flex, add a display property with a value of flex. Compare the two divs in the browser. CSS Flexbox (Flexible Box Layout) CSS Flexbox Container
In the .container ruleset, set the display property to inline-flex.
Assign the <div> element with the id flexstart a justify-content property with a value of flex-start. CSS Flexbox Container CSS Flexbox Items
You won’t see any changes since flex-start is the default value;
#flexstart {
justify-content: flex-start;
}
Assign the <div> element with the id flexend a justify-content property with a value of flex-end. CSS Flexbox Container
Assign the <div> element with the id center a justify-content property with a value of center. CSS Flexbox Container
Assign the <div> element with the id spacearound a justify-content property with a value of space-around. CSS Flexbox Container
Stretch and shrink the browser window to compare and contrast how the elements in each div behave.
Assign the <div> element with the id spacebetween a justify-content property with a value of space-between. CSS Flexbox Container
Assign the <div> element with id flexstart an align-items property with the value flex-start. CSS Flexbox Container CSS Flexbox Items
Assign the <div> element with id flexend an align-items property with the value flex-end. CSS Flexbox Container CSS Flexbox Items
Assign the <div> element with id center an align-items property with the value center. CSS Flexbox Container
Assign the <div> element with id baseline an align-items property with the value baseline. How does the behavior of these elements differ from those in other divs? CSS Flexbox Container
Take a look at the elements under “Stretch” at the bottom of the page. Now, in the .left, .center, .right ruleset, change the height property to min-height and observe what happens to these elements.
.left,
.center,
.right {
min-height: value;
}
Assign .top.side and .top.center a flex-grow value of 1. Stretch and shrink the browser. CSS Flexbox Items
Assign .middle.center the flex-grow value of 1. Stretch and shrink the browser again. CSS Flexbox Items
Assign .bottom.side a flex-grow value of 1 and .bottom.center a flex-grow value of 2. Shrink and stretch the browser again. Compare the differences in behavior of all three sections. CSS Flexbox Items
Assign .top.side a flex-shrink value of 2. CSS Flexbox Items
Stretch and shrink the browser. Because the default value for flex-shrink is 1, the .top.center div will shrink but not as much as the .side divs. CSS Flexbox Items
Note: Keep the main browser window full size and adjust the width of the mini browser.
Assign .middle.side a flex-shrink value of 0. CSS Flexbox Items
Stretch and shrink the browser. How do the .middle divs resize differently than the .top divs?
Assign the .bottom.center div a flex-shrink value of 2. CSS Flexbox Items
Shrink and stretch the browser again. How do the .bottom divs resize differently than the .top and .middle divs?
In style.css, inside the .grow.side ruleset, add a flex-basis of 60px. CSS Flexbox Items
In the same rule, add a flex-grow value of 1. CSS Flexbox Items
In the .grow.center rule, add a flex-grow property with a value of 3. CSS Flexbox Items
In the .shrink.side rule, add a flex-basis property with a value of 300px. CSS Flexbox Items
In the same rule, add a flex-shrink property with a value of 3. CSS Flexbox Items
In the .shrink.center rule, add a flex-shrink property with a value of 2. CSS Flexbox Items
In the same rule, add a flex-basis property with a value of 150px. Now stretch and shrink the browser. CSS Flexbox Items
In #top .side, all three values for flex-grow, flex-shrink, and flex-basis are assigned individually. Refactor them to be declared in one line using the shorthand flex property. CSS Flexbox Items
.big {
flex-grow: 2;
flex-shrink: 1;
flex-basis: 150px;
}
.big {
flex: 2 1 150px;
}
In #top .center, all three values for flex-grow, flex-shrink, and flex-basis are assigned individually. Refactor them to be declared in one line. CSS Flexbox Items
In #bottom .side, all three values for flex-grow, flex-shrink, and flex-basis are assigned individually. Refactor them to be declared in one line. CSS Flexbox Items
In #bottom .center, all three values for flex-grow, flex-shrink, and flex-basis are assigned individually. Refactor them to be declared in one line. CSS Flexbox Items
In style.css, inside the #wrap ruleset, add a flex-wrap property with a value of wrap. Shrink and stretch the browser. CSS Flexbox Container
Inside the #nowrap ruleset, add a flex-wrap property with a value of nowrap. Shrink and stretch the browser. CSS Flexbox Container
Inside the #reverse ruleset, add a flex-wrap property with a value of wrap-reverse. Shrink and stretch the browser. CSS Flexbox Container
Inside the .container ruleset, add a justify-content property with a value of space-around. Stretch and shrink the browser. What’s different this time? CSS Flexbox Container
In style.css, inside the #flexstart ruleset, add an align-content property with a value of flex-start to position the rows of elements at the top of the parent container. CSS Flexbox Container CSS Flexbox Items
In style.css, inside the #flexend ruleset, add an align-content property with a value of flex-end to position the rows of elements at the bottom of the parent container. CSS Flexbox Container CSS Flexbox Items
In style.css, inside the #center ruleset, add an align-content property with a value of center to position the rows of elements at the center of the parent container. CSS Flexbox Container
In style.css, inside the #between ruleset, add an align-content property with a value of space-between to space out all of the rows of elements evenly with equal space between each row. CSS Flexbox Container
In style.css, inside the #around ruleset, add an align-content property with a value of space-around to space out all of the rows of elements evenly with equal space around each row. CSS Flexbox Container
Inside the .left, .center, .right ruleset, change the height property to min-height. What happens to the flex items in the #stretch container?
In style.css, inside the #row ruleset, add a flex-direction property with a value of row. CSS Flexbox Container
Inside the #row-reverse ruleset, add a flex-direction property with a value of row-reverse. CSS Flexbox Container
Inside the #column ruleset, add a flex-direction property with a value of column. CSS Flexbox Container
Inside the #column-reverse ruleset, add a flex-direction property with a value of column-reverse. CSS Flexbox Container
Change the height property of .container elements to be max-height. Remember to stretch and shrink the browser after each checkpoint so you can see the effects.
Inside the .container ruleset, add an align-items property with a value of center. CSS Flexbox Container
Inside the .container ruleset, add a justify-content property with a value of space-around. CSS Flexbox Container
Inside the .box ruleset, add a flex-grow property with a value of 1. In which direction do the elements grow? CSS Flexbox Items
In the #row-reverse ruleset, set the flex-flow property to have a direction of row-reverse and to wrap elements. You should be able to accomplish this in one line. CSS Flexbox Container
#row-reverse {
flex-flow: row-reverse wrap;
}
In the #column ruleset, set the flex-flow property to give elements a direction of column and to wrap elements. You should be able to accomplish this in one line. CSS Flexbox Container
Inside the .main ruleset, add a display property with a value of flex.
Inside the .main ruleset, add an align-items property with a value of center. CSS Flexbox Container
Inside the .main ruleset, add a justify-content property with a value of space-around. CSS Flexbox Container
Inside the .container ruleset, add a display property with a value of flex.
Inside the .container ruleset, add a flex-direction property with a value of column. CSS Flexbox Container
Inside the .container ruleset, add a justify-content property with a value of center. CSS Flexbox Container
Inside the .container ruleset, add an align-items property with a value of center. CSS Flexbox Container
Repeat steps 53, 55, and 56 for the .child ruleset.
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.
Now, inside the .cards ruleset, set the flex-wrap property to have a value of wrap. CSS Flexbox Container
Inside the .cards ruleset, set the justify-content property to have a value of space-around. CSS Flexbox Container
In the .col ruleset, set the display property to have a value of inline-flex.
In the .col ruleset, set the flex-direction property to have a value of column. CSS Flexbox Container
In the .col ruleset, set the justify-content property to have a value of space-between. CSS Flexbox Container
Page updated
Google Sites
Report abuse