Help:Wiki University Flexbox Answers

Quick Quiz
1. You can see all the stuff on this page on your smart phone just as you see it here? B. False The view port on a smart phone is much smaller than a PC so the items will "wrap" and form a column and thus eliminate scroll bars.

2. When viewing this page on your smart phone, you do not have to scroll to see all the width? A. True See the above explanation

3. Where might you see the "Get Involved" on your smart phone? C. Under "Wiki Help." If you had dragged the right edge of the Introduction page, you would have noticed that "Get Involved" wrapped under 'Wiki Help.

4. One of the reasons for Flexbox is to allow a page to be seen more easily on a tablet without scroll bars. A. True

Back to Introduction

Exercises
1.  Item 1  Item 2  Item 3  Item 4  Item 5 Here is the coding: Item 1    Item 2     Item 3     Item 4     Item 5

2.  Item 1  Item 2  Item 3  Item 4  Item 5 Here is the coding: Item 1    Item 2     Item 3     Item 4     Item 5

3.  Item 1  Item 2  Item 3  Item 4  Item 5 Here is the coding: Item 1    Item 2     Item 3     Item 4     Item 5

Quick Quiz
1. To put items at the beginning of a row, you need to use "justify-content:left-end"?. B. False ''Items are put on the left side of the page by default by using "display:flex." 2. To place items in the middle of a page you need to use you use: "justify-content:middle?" A. False The code is "justify-content:center" 3. To place items on the right side of a page you need to use "justify-content:right-end?" B. False The code is "justify-content:flex-end" Back to Display Horizontal

Exercises
1. Take these five boxes and arrange them in a row with even spaces between: Item 1 Item 2 Item 3 Item 4 Item 5 Here is the coding: Item 1    Item 2     Item 3     Item 4     Item 5

2. Place these five boxes using the space around attribute

Item 1 Item 2 Item 3 Item 4 Item 5 Here is the coding: Item 1    Item 2     Item 3     Item 4     Item 5

Back to Horizontal Spacing

Quick Quiz
1. To put even spaces between boxes and no spaces at each end, you use "justify-content:space-around". B. False Use justify-content:space-between. 2. To place items in the middle of a page you need to use you use: "justify-content:middle?" B. False You use justify-content:center. 3. To place items on the right side of a page you need to use "justify-content:right-end?" B. False The coding is justify-content:flex-end.

Back to Horizontal Spacing

Exercises
1. Take these five boxes and arrange them in a row with item 4 10 times bigger than the rest Item 1 Item 2 Item 3 Item 4 Item 5

Item 1 Item 2 Item 3 Item 4 Item 5 Here's the coding: Item 1   Item 2    Item 3    Item 4    Item 5 2. Put item 4 and the first item in the row Item 1 Item 2 Item 3 Item 4 Item 5 Here's the coding: Item 1   Item 2    Item 3    Item 4    Item 5

Back to Box Sizes

Quick Quiz
1. You cannot change the size of the items in a row with Flexbox B. False ''You can change the size of a item by including "flex:#." 2. Flex:5 means that the item is about 1/5 the size of a flex:1 item. B. False ''It means that "flex:5" is about five times larger than a flex:1 item. 3. Order:1 means the item is first in the row. A. True Back to Box Sizes

Exercises
1. Take these five items and set them to a width of 300 pixels and put in a wrap attribute. Item 1 Item 2 Item 3 Item 4 Item 5

Item 1 Item 2 Item 3 Item 4 Item 5

Here's the coding: Item 1 Item 2 Item 3 Item 4 Item 5 2. Made "item 3" 900 pixels and set the width of the rest to 250 pixels and then wrap them. Item 1 Item 2 Item 3 Item 4 Item 5 Here's the coding: Item 1 Item 2 Item 3 Item 4 Item 5

Back to Flex Wrapping

Quick Quiz
1. Wrapping will only happen when flex:# is in the of the code line. B. False 2. When wrapping, the last item will come the first item? B. False The last item will show up under the first item. 3. When wrapping, the last item will end up on top of the first item? B. False The last item will show up under the first item. Back to Flex Wrapping

Exercises
1. Make these five items appear in a column without any coding Item 1 Item 2 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 4 Item 5 No coding is required because you browser places items on a page in this manner by default 2. Make the above five items appear in a column with coding. Item 1 Item 2 Item 3 Item 4 Item 5 Here's the coding: Item 1 Item 2 Item 3 Item 4 Item 5 3. Put the five items in a row and put five other items inside "item 4" Item 1 Item 2 Item 3 Item A Item B  Item C  Item D  Item E  Item 5 Borders and width were added for viewing Here's the coding: Item 1 Item 2 Item 3 Item A    Item B     Item C     Item D     Item E     Item 5 Borders and width were added for viewing Back to Display Vertical

Quick Quiz
1. you cannot put a column inside a box that is in a row of items B. False 2. You cannot put a Flexbox inside of another Flexbox B. False 3. You cannot put a Flexbox inside of a Flexbox which is inside another Flexbox B. False 4. There is only one way to put items in a column B. False Back to Display Vertical

Exercises
1. Create a row of five boxes, each 100 pixel in height, and put these five titles in the center of each box horizontally, not vertically. Item 1 Item 2 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 4 Item 5 Here's the cdoing: Item 1 Item 2 Item 3 Item 4 Item 5 2. Create a row of five boxes and put these five titles in the center of each vertically, not horizontally. Item 1 Item 2 Item 3 Item 4 Item 5 Here's the coding: Item 1 Item 2 Item 3 Item 4 Item 5 3. Create a row of five boxes and put these five titles in the center of each box both vertically and horizontally. Item 1 Item 2 Item 3 Item 4 Item 5 Here's the cdoing: Item 1 Item 2 Item 3 Item 4 Item 5 Back to Centering Text

Quick Quiz
1. You have to include "display-flex" in order to center items in a box A. True 2. To place a title in the center vertically, you use "justify-content:center" B. False You use: "align-items:center" instead 3. To place a title in the middle horizontally, you use "justify-content:middle." B. False You use: "justify-content:center." Back to Centering Text

Exercises
1. Take these five items and make a tool bar and center text in each one. Item 1 Item 2 Item 3 Item 4 Item 5 Item 1 Item 2 Item 3 Item 4 Item 5 2. Create a six item tool bar with the blank space being "flex:3, between item 3 and 4." Item 1 Item 2 Item 3 Item 4 Item 5 3. For extra credit, place borders on three side of each item. Item 1 Item 2 Item 3  Item 4 Item 5 4. For double extra credit, install a background color to each item except for the blank item. <div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:1px solid black; border-bottom:1px solid black; border-right:1px solid black; background-color:#FFA500">Item 1 <div style="flex:1; display:flex; align-items:center; justify-content:center; border-bottom:1px solid black; border-right:1px solid black; background-color:#FF7F50">Item 2 <div style="flex:1; display:flex; align-items:center; justify-content:center; border-bottom:1px solid black; border-right:1px solid black; background-color: #E9967A">Item 3 <div style="flex:3; display:flex; align-items:center; justify-content:center; border-bottom:1px solid black; border-right:1px solid black; background-color: "> <div style="flex:1; display:flex; align-items:center; justify-content:center; border-bottom:1px solid black; border-right:1px solid black; background-color:#DAA520 ">Item 4 <div style="flex:1; display:flex; align-items:center; justify-content:center; border-bottom:1px solid black; border-right:1px solid black; background-color:#FFE4B5 ">Item 5 Here's the coding for all 5 questions:

<div style="flex:1; display:flex; align-items:center; justify-content:center; border-left:1px solid black; border-bottom:1px solid black; border-right:1px solid black; background-color:#FFA500">Item 1 <div style="flex:1; display:flex; align-items:center; justify-content:center; border-bottom:1px solid black; border-right:1px solid black; background-color:#FF7F50">Item 2 <div style="flex:1; display:flex; align-items:center; justify-content:center; border-bottom:1px solid black; border-right:1px solid black; background-color: #E9967A">Item 3 <div style="flex:3; display:flex; align-items:center; justify-content:center; border-bottom:1px solid black; border-right:1px solid black; background-color: "> <div style="flex:1; display:flex; align-items:center; justify-content:center; border-bottom:1px solid black; border-right:1px solid black; background-color:#DAA520 ">Item 4 <div style="flex:1; display:flex; align-items:center; justify-content:center; border-bottom:1px solid black; border-right:1px solid black; background-color:#FFE4B5 ">Item 5 Back to Misc Horizontal

Quick Quiz
1. It is impossible to control the space between boxes in a row. B. False 2. It is not necessary to set the width of each item in order to customize the space between items in a row. B. False Back to Misc Horizontal

Exercises
1. Create three boxes of equal width and the height of 150 pixels and place them in a row. 2. Center the first name of a friend in each of the boxes. <div style="flex:1; display:flex; align-items:center; justify-content:center; height:150px; border:1px solid black; font-size:2vw">Moe <div style="flex:1; display:flex; align-items:center; justify-content:center; height:150px; border:1px solid black; font-size:2vw">Larry <div style="flex:1; display:flex; align-items:center; justify-content:center; height:150px; border:1px solid black; font-size:2vw">Curly Here's the coding: <div style="flex:1; display:flex; align-items:center; justify-content:center; height:150px; border:1px solid black">Moe <div style="flex:1; display:flex; align-items:center; justify-content:center; height:150px; border:1px solid black">Larry <div style="flex:1; display:flex; align-items:center; justify-content:center; height:150px; border:1px solid black">Curly

Back to Misc Flexbox Attributes

Quick Quiz
1. To change the order of items in a Flexbox row you have to "cut and paste" B. False 2. You cannot make the height of items all the same in a row without customizing the height of each until they are equal. B. False 3. Centering both vertically and horizontally is very hard to achieve in Wikitext alone. A. True Back to Misc Flexbox Attributes