{ "name": "CSS Flexbox", "order": 5, "time": "5 hours", "helpRoom": "Help", "challenges": [ { "id": "587d78aa367417b2b2512aef", "title": "Introduction to the CSS Flexbox Challenges", "description": [ [ "", "", "A website's User Interface (\"UI\") has two components. First, there are the visual elements, such as colors, fonts, and images. Second, there is the placement or positioning of those elements. In Responsive Web Design, a UI layout must accommodate many different browsers and devices accessing the content.

CSS3 introduced Flexible Boxes, or flexbox, to create page layouts for a dynamic UI. It is a layout mode that arranges elements in a predictable way for different screen sizes and browsers. While somewhat new, all popular modern browsers support flexbox. This section covers how to use flexbox and the different layout options it offers.", "" ] ], "releasedOn": "Feb 17, 2017", "challengeSeed": [], "tests": [], "type": "waypoint", "challengeType": 7, "isRequired": false, "translations": {} }, { "id": "587d78ab367417b2b2512af0", "title": "Use display: flex to Position Two Boxes", "description": [ "This section uses alternating challenge styles to show how to use CSS to position elements in a flexible way. First, a challenge will explain theory, then a practical challenge using a simple tweet component will apply the flexbox concept.", "Placing the CSS property display: flex; on an element allows you to use other flex properties to build a responsive page.", "
", "Add the CSS property display to #box-container and set its value to flex." ], "challengeSeed": [ "", "
", "
", "
", "
" ], "tests": [ "assert($('#box-container').css('display') == 'flex', 'message: #box-container should have the display property set to a value of flex.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {} }, { "id": "587d78ab367417b2b2512af1", "title": "Add Flex Superpowers to the Tweet Embed", "description": [ "To the right is the tweet embed that will be used as the practical example. Some of the elements would look better with a different layout. The last challenge demonstrated display: flex. Here you'll add it to several components in the tweet embed to start adjusting their positioning.", "
", "Add the CSS property display: flex to all of the following items - note that the selectors are already set up in the CSS:", "header, the header's .profile-name, the header's .follow-btn, the header's h3 and h4, the footer, and the footer's .stats." ], "challengeSeed": [ "", "
", " \"Quincy", "
", "

Quincy Larson

", "

@ossia

", "
", "
", " ", "
", "
", "
", "

How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.

", " 7:24 PM - 17 Aug 2016", "
", "
", "" ], "tests": [ "assert($('header').css('display') == 'flex', 'message: Your header should have a display property set to flex.');", "assert($('footer').css('display') == 'flex', 'message: Your footer should have a display property set to flex.');", "assert($('h3').css('display') == 'flex', 'message: Your h3 should have a display property set to flex.');", "assert($('h4').css('display') == 'flex', 'message: Your h4 should have a display property set to flex.');", "assert($('.profile-name').css('display') == 'flex', 'message: Your .profile-name should have a display property set to flex.');", "assert($('.follow-btn').css('display') == 'flex', 'message: Your .follow-btn should have a display property set to flex.');", "assert($('.stats').css('display') == 'flex', 'message: Your .stats should have a display property set to flex.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {} }, { "id": "587d78ab367417b2b2512af2", "title": "Use the flex-direction Property to Make a Row", "description": [ "Adding display: flex to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the flex-direction property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically.", "Other options for flex-direction are row-reverse and column-reverse.", "Note
The default value for the flex-direction property is row.", "
", "Add the CSS property flex-direction to the #box-container element, and give it a value of row-reverse." ], "challengeSeed": [ "", "", "
", "
", "
", "
" ], "tests": [ "assert($('#box-container').css('flex-direction') == 'row-reverse', 'message: The #box-container element should have a flex-direction property set to row-reverse.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {} }, { "id": "587d78ab367417b2b2512af3", "title": "Apply the flex-direction Property to Create Rows in the Tweet Embed", "description": [ "The header and footer in the tweet embed example have child items that could be arranged as rows using the flex-direction property. This tells CSS to align the children horizontally.", "
", "Add the CSS property flex-direction to both the header and footer and set the value to row." ], "challengeSeed": [ "", "
", " \"Quincy", "
", "

Quincy Larson

", "

@ossia

", "
", "
", " ", "
", "
", "
", "

How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.

", " 7:24 PM - 17 Aug 2016", "
", "
", "" ], "tests": [ "assert(code.match(/header\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'message: The header should have a flex-direction property set to row.');", "assert(code.match(/footer\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'message: The footer should have a flex-direction property set to row.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {} }, { "id": "587d78ac367417b2b2512af4", "title": "Use the flex-direction Property to Make a Column", "description": [ "The last two challenges used the flex-direction property set to row. This property can also create a column by vertically stacking the children of a flex container.", "
", "Add the CSS property flex-direction to the #box-container element, and give it a value of column." ], "challengeSeed": [ "", "", "
", "
", "
", "
" ], "tests": [ "assert($('#box-container').css('flex-direction') == 'column', 'message: The #box-container element should have a flex-direction property set to column.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {} }, { "id": "587d78ac367417b2b2512af5", "title": "Apply the flex-direction Property to Create a Column in the Tweet Embed", "description": [ "The tweet embed header and footer used the flex-direction property earlier with a row value. Similarly, the items inside the .profile-name element would work well stacked as a column.", "
", "Add the CSS property flex-direction to the header's .profile-name element and set the value to column." ], "challengeSeed": [ "", "
", " \"Quincy", "
", "

Quincy Larson

", "

@ossia

", "
", "
", " ", "
", "
", "
", "

How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.

", " 7:24 PM - 17 Aug 2016", "
", "
", "" ], "tests": [ "assert($('.profile-name').css('flex-direction') == 'column', 'message: The .profile-name element should have a flex-direction property set to column.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {} }, { "id": "587d78ac367417b2b2512af6", "title": "Align Elements Using the justify-content Property", "description": [ "Sometimes the flex items within a flex container do not fill all the space in the container. It is common to want to tell CSS how to align and space out the flex items a certain way. Fortunately, the justify-content property has several options to do this. But first, there is some important terminology to understand before reviewing those options.", "Here is a useful image showing a row to illustrate the concepts below.", "Recall that setting a flex container as a row places the flex items side-by-side from left-to-right. A flex container set as a column places the flex items in a vertical stack from top-to-bottom. For each, the direction the flex items are arranged is called the main axis. For a row, this is a horizontal line that cuts through each item. And for a column, the main axis is a vertical line through the items.", "There are several options for how to space the flex items along the line that is the main axis. One of the most commonly used is justify-content: center;, which aligns all the flex items to the center inside the flex container. Others options include:", "", "
", "An example helps show this property in action. Add the CSS property justify-content to the #box-container element, and give it a value of center.", "Bonus
Try the other options for the justify-content property in the code editor to see their differences. But note that a value of center is the only one that will pass this challenge." ], "challengeSeed": [ "", "", "
", "
", "
", "
" ], "tests": [ "assert($('#box-container').css('justify-content') == 'center', 'message: The #box-container element should have a justify-content property set to a value of center.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {} }, { "id": "587d78ac367417b2b2512af7", "title": "Use the justify-content Property in the Tweet Embed", "description": [ "The last challenge showed an example of the justify-content property. For the tweet embed, this property can be applied to align the items in the .profile-name element.", "
", "Add the CSS property justify-content to the header's .profile-name element and set the value to any of the options from the last challenge." ], "challengeSeed": [ "", "
", " \"Quincy", "
", "

Quincy Larson

", "

@ossia

", "
", "
", " ", "
", "
", "
", "

How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.

", " 7:24 PM - 17 Aug 2016", "
", "
", "" ], "tests": [ "assert(code.match(/header\\s.profile-name\\s*{\\s*?.*?\\s*?.*?\\s*?\\s*?.*?\\s*?justify-content\\s*:\\s*(center|flex-start|flex-end|space-between|space-around)\\s*;/g), 'message: The .profile-name element should have the justify-content property set to any of these values: center, flex-start, flex-end, space-between, or space-around.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {} }, { "id": "587d78ad367417b2b2512af8", "title": "Align Elements Using the align-items Property", "description": [ "The align-items property is similar to justify-content. Recall that the justify-content property aligned flex items along the main axis. For rows, the main axis is a horizontal line and for columns it is a vertical line.", "Flex containers also have a cross axis which is the opposite of the main axis. For rows, the cross axis is vertical and for columns, the cross axis is horizontal.", "CSS offers the align-items property to align flex items along the cross axis. For a row, it tells CSS how to push the items in the entire row up or down within the container. And for a column, how to push all the items left or right within the container.", "The different values available for align-items include:", "", "
", "An example helps show this property in action. Add the CSS property align-items to the #box-container element, and give it a value of center.", "Bonus
Try the other options for the align-items property in the code editor to see their differences. But note that a value of center is the only one that will pass this challenge." ], "challengeSeed": [ "", "", "
", "

Hello

", "

Goodbye

", "
" ], "tests": [ "assert($('#box-container').css('align-items') == 'center', 'message: The #box-container element should have an align-items property set to a value of center.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {} }, { "id": "587d78ad367417b2b2512af9", "title": "Use the align-items Property in the Tweet Embed", "description": [ "The last challenge introduced the align-items property and gave an example. This property can be applied to a few tweet embed elements to align the flex items inside them.", "
", "Add the CSS property align-items to the header's .follow-btn element, the header's h3, and the header's h4. Set the value to center." ], "challengeSeed": [ "", "
", " \"Quincy", "
", "

Quincy Larson

", "

@ossia

", "
", "
", " ", "
", "
", "
", "

How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.

", " 7:24 PM - 17 Aug 2016", "
", "
", "" ], "tests": [ "assert($('.follow-btn').css('align-items') == 'center', 'message: The .follow-btn element should have the align-items property set to a value of center.');", "assert($('h3').css('align-items') == 'center', 'message: The h3 element should have the align-items property set to a value of center.');", "assert($('h4').css('align-items') == 'center', 'message: The h4 element should have the align-items property set to a value of center.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {} }, { "id": "587d78ad367417b2b2512afa", "title": "Use the flex-wrap Property to Wrap a Row or Column", "description": [ "CSS flexbox has a feature to split a flex item into multiple rows (or columns). By default, a flex container will fit all flex items together. For example, a row will all be on one line.", "However, using the flex-wrap property, it tells CSS to wrap items. This means extra items move into a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container.", "CSS also has options for the direction of the wrap:", "", "
", "The current layout has too many boxes for one row. Add the CSS property flex-wrap to the #box-container element, and give it a value of wrap." ], "challengeSeed": [ "", "", "
", "
", "
", "
", "
", "
", "
", "
" ], "tests": [ "assert($('#box-container').css('flex-wrap') == 'wrap', 'message: The #box-container element should have the flex-wrap property set to a value of wrap.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {} }, { "id": "587d78ad367417b2b2512afb", "title": "Use the flex-shrink Property to Shrink Items", "description": [ "So far, all the properties in the challenges apply to the flex container (the parent of the flex items). However, there are several useful properties for the flex items.", "The first is the flex-shrink property. When it's used, it allows an item to shrink if the flex container is too small. Items shrink when the width of the parent container is smaller than the combined widths of all the flex items within it.", "The flex-shrink property takes numbers as values. The higher the number, the more it will shrink compared to the other items in the container. For example, if one item has a flex-shrink value of 1 and the other has a flex-shrink value of 3, the one with the value of 3 will shrink three times as much as the other.", "
", "Add the CSS property flex-shrink to both #box-1 and #box-2. Give #box-1 a value of 1 and #box-2 a value of 2." ], "challengeSeed": [ "", "", "
", "
", "
", "
" ], "tests": [ "assert($('#box-1').css('flex-shrink') == '1', 'message: The #box-1 element should have the flex-shrink property set to a value of 1.');", "assert($('#box-2').css('flex-shrink') == '2', 'message: The #box-2 element should have the flex-shrink property set to a value of 2.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {} }, { "id": "587d78ae367417b2b2512afc", "title": "Use the flex-grow Property to Expand Items", "description": [ "The opposite of flex-shrink is the flex-grow property. Recall that flex-shrink controls the size of the items when the container shrinks. The flex-grow property controls the size of items when the parent container expands.", "Using a similar example from the last challenge, if one item has a flex-grow value of 1 and the other has a flex-grow value of 3, the one with the value of 3 will grow three times as much as the other.", "
", "Add the CSS property flex-grow to both #box-1 and #box-2. Give #box-1 a value of 1 and #box-2 a value of 2." ], "challengeSeed": [ "", "", "
", "
", "
", "
" ], "tests": [ "assert($('#box-1').css('flex-grow') == '1', 'message: The #box-1 element should have the flex-grow property set to a value of 1.');", "assert($('#box-2').css('flex-grow') == '2', 'message: The #box-2 element should have the flex-grow property set to a value of 2.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {} }, { "id": "587d78ae367417b2b2512afd", "title": "Use the flex-basis Property to Set the Initial Size of an Item", "description": [ "The flex-basis property specifies the initial size of the item before CSS makes adjustments with flex-shrink or flex-grow.", "The units used by the flex-basis property are the same as other size properties (px, em, %, etc.). The value auto sizes items based on the content.", "
", "Set the initial size of the boxes using flex-basis. Add the CSS property flex-basis to both #box-1 and #box-2. Give #box-1 a value of 10em and #box-2 a value of 20em." ], "challengeSeed": [ "", " ", "
", "
", "
", "
" ], "tests": [ "assert($('#box-1').css('flex-basis') != 'auto', 'message: The #box-1 element should have a flex-basis property.');", "assert(code.match(/#box-1\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-basis:\\s*?10em;/g), 'message: The #box-1 element should have a flex-basis value of 10em.');", "assert($('#box-2').css('flex-basis') != 'auto', 'message: The #box-2 element should have the flex-basis property.');", "assert(code.match(/#box-2\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-basis:\\s*?20em;/g), 'message: The #box-2 element should have a flex-basis value of 20em.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {} }, { "id": "587d78ae367417b2b2512afe", "title": "Use the flex Shorthand Property", "description": [ "There is a shortcut available to set several flex properties at once. The flex-grow, flex-shrink, and flex-basis properties can all be set together by using the flex property.", "For example, flex: 1 0 10px; will set the item to flex-grow: 1;, flex-shrink: 0;, and flex-basis: 10px;.", "The default property settings are flex: 0 1 auto;.", "
", "Add the CSS property flex to both #box-1 and #box-2. Give #box-1 the values so its flex-grow is 2, its flex-shrink is 2, and its flex-basis is 150px. Give #box-2 the values so its flex-grow is 1, its flex-shrink is 1, and its flex-basis is 150px.", "These values will cause #box-1 to be twice the size of #box-2 when the container is greater than 300px and half the size of #box-2 when the container is less than 300px. 300px is the combined size of the flex-basis values of the two boxes." ], "challengeSeed": [ "", "", "
", "
", "
", "
" ], "tests": [ "assert($('#box-1').css('flex-grow') == '2' && $('#box-1').css('flex-shrink') == '2' && $('#box-1').css('flex-basis') == '150px', 'message: The #box-1 element should have the flex property set to a value of 2 2 150px.');", "assert($('#box-2').css('flex-grow') == '1' && $('#box-2').css('flex-shrink') == '1' && $('#box-2').css('flex-basis') == '150px', 'message: The #box-2 element should have the flex property set to a value of 1 1 150px.');", "assert(code.match(/flex:\\s*?\\d\\s+?\\d\\s+?150px;/g).length == 2, 'message: Your code should use the flex property for #box-1 and #box-2.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {} }, { "id": "587d78ae367417b2b2512aff", "title": "Use the order Property to Rearrange Items", "description": [ "The order property is used to tell CSS the order of how flex items appear in the flex container. By default, items will appear in the same order they come in the source HTML. The property takes numbers as values, and negative numbers can be used.", "
", "Add the CSS property order to both #box-1 and #box-2. Give #box-1 a value of 2 and give #box-2 a value of 1." ], "challengeSeed": [ "", "", "
", "
", "
", "
" ], "tests": [ "assert($('#box-1').css('order') == '2', 'message: The #box-1 element should have the order property set to a value of 2.');", "assert($('#box-2').css('order') == '1', 'message: The #box-2 element should have the order property set to a value of 1.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {} }, { "id": "587d78af367417b2b2512b00", "title": "Use the align-self Property", "description": [ "The final property for flex items is align-self. This property allows you to adjust each item's alignment individually, instead of setting them all at once. This is useful since other common adjustment techniques using the CSS properties float, clear, and vertical-align do not work on flex items.", "align-self accepts the same values as align-items and will override any value set by the align-items property.", "
", "Add the CSS property align-self to both #box-1 and #box-2. Give #box-1 a value of center and give #box-2 a value of flex-end." ], "challengeSeed": [ "", "", "
", "
", "
", "
" ], "tests": [ "assert($('#box-1').css('align-self') == 'center', 'message: The #box-1 element should have the align-self property set to a value of center.');", "assert($('#box-2').css('align-self') == 'flex-end', 'message: The #box-2 element should have the align-self property set to a value of flex-end.');" ], "solutions": [], "hints": [], "type": "waypoint", "releasedOn": "Feb 17, 2017", "challengeType": 0, "translations": {} } ] }