Merge pull request #12887 from ajain17/fix/multiple_flexbox_issues
Fixes multiple flex issues
This commit is contained in:
mrugesh mohapatra
GitHub
@ -41,30 +41,35 @@
|
||||
"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 <code>display: flex;</code> on an element allows you to use other flex properties to build a responsive page.",
|
||||
"<hr>",
|
||||
"Add the CSS property <code>display</code> to both <code>#box-1</code> and <code>#box-2</code> and set each to a value of flex."
|
||||
"Add the CSS property <code>display</code> to <code>#box-container</code> and set its value to flex."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" #box-container {",
|
||||
" ",
|
||||
" }",
|
||||
" ",
|
||||
" #box-1 {",
|
||||
" background-color: dodgerblue;",
|
||||
" width: 500px;",
|
||||
" height: 500px;",
|
||||
" width: 50%;",
|
||||
" height: 50%;",
|
||||
" ",
|
||||
" }",
|
||||
"",
|
||||
" #box-2 {",
|
||||
" background-color: orangered;",
|
||||
" width: 500px;",
|
||||
" height: 500px;",
|
||||
" width: 50%;",
|
||||
" height: 50%;",
|
||||
" ",
|
||||
" }",
|
||||
"</style>",
|
||||
"<div id=\"box-1\"></div>",
|
||||
"<div id=\"box-2\"></div>"
|
||||
"<div id=\"box-container\">",
|
||||
" <div id=\"box-1\"></div>",
|
||||
" <div id=\"box-2\"></div>",
|
||||
"</div>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($('#box-1').css('display') == 'flex', 'message: <code>#box-1</code> should have the <code>display</code> property set to a value of flex.');",
|
||||
"assert($('#box-2').css('display') == 'flex', 'message: <code>#box-2</code> should have the <code>display</code> property set to a value of flex.');"
|
||||
"assert($('#box-container').css('display') == 'flex', 'message: <code>#box-container</code> should have the <code>display</code> property set to a value of flex.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
@ -192,9 +197,10 @@
|
||||
"title": "Using the Flex-direction Property to Make a Row",
|
||||
"description": [
|
||||
"Adding <code>display: flex</code> 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 <code>flex-direction</code> 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 <code>flex-direction</code> are row-reverse and column-reverse.",
|
||||
"<strong>Note</strong><br>The default value for the <code>flex-direction</code> property is row.",
|
||||
"<hr>",
|
||||
"Add the CSS property <code>flex-direction</code> to the <code>#box-container</code> element, and give it a value of row."
|
||||
"Add the CSS property <code>flex-direction</code> to the <code>#box-container</code> element, and give it a value of row-reverse."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -204,14 +210,14 @@
|
||||
" }",
|
||||
" #box-1 {",
|
||||
" background-color: dodgerblue;",
|
||||
" width: 500px;",
|
||||
" height: 500px;",
|
||||
" width: 50%;",
|
||||
" height: 50%;",
|
||||
" }",
|
||||
"",
|
||||
" #box-2 {",
|
||||
" background-color: orangered;",
|
||||
" width: 500px;",
|
||||
" height: 500px;",
|
||||
" width: 50%;",
|
||||
" height: 50%;",
|
||||
" }",
|
||||
"</style>",
|
||||
"",
|
||||
@ -221,7 +227,7 @@
|
||||
"</div>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($('#box-container').css('flex-direction') == 'row', 'message: The <code>#box-container</code> element should have a <code>flex-direction</code> property set to row.');"
|
||||
"assert($('#box-container').css('flex-direction') == 'row-reverse', 'message: The <code>#box-container</code> element should have a <code>flex-direction</code> property set to row-reverse.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
@ -331,8 +337,8 @@
|
||||
"</footer>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($('header').css('flex-direction') == 'row', 'message: The <code>header</code> should have a <code>flex-direction</code> property set to row.');",
|
||||
"assert($('footer').css('flex-direction') == 'row', 'message: The <code>footer</code> should have a <code>flex-direction</code> property set to row.');"
|
||||
"assert(code.match(/header\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'message: The <code>header</code> should have a <code>flex-direction</code> property set to row.');",
|
||||
"assert(code.match(/footer\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'message: The <code>footer</code> should have a <code>flex-direction</code> property set to row.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
@ -356,14 +362,14 @@
|
||||
" }",
|
||||
" #box-1 {",
|
||||
" background-color: dodgerblue;",
|
||||
" width: 500px;",
|
||||
" height: 500px;",
|
||||
" width: 50%;",
|
||||
" height: 50%;",
|
||||
" }",
|
||||
"",
|
||||
" #box-2 {",
|
||||
" background-color: orangered;",
|
||||
" width: 500px;",
|
||||
" height: 500px;",
|
||||
" width: 50%;",
|
||||
" height: 50%;",
|
||||
" }",
|
||||
"</style>",
|
||||
"",
|
||||
@ -516,14 +522,14 @@
|
||||
" }",
|
||||
" #box-1 {",
|
||||
" background-color: dodgerblue;",
|
||||
" width: 100px;",
|
||||
" height: 200px;",
|
||||
" width: 25%;",
|
||||
" height: 100%;",
|
||||
" }",
|
||||
"",
|
||||
" #box-2 {",
|
||||
" background-color: orangered;",
|
||||
" width: 100px;",
|
||||
" height: 200px;",
|
||||
" width: 25%;",
|
||||
" height: 100%;",
|
||||
" }",
|
||||
"</style>",
|
||||
"",
|
||||
@ -641,7 +647,7 @@
|
||||
"</footer>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($('.profile-name').css('justify-content') == 'center' || $('.profile-name').css('justify-content') == 'flex-start' || $('.profile-name').css('justify-content') == 'flex-end' || $('.profile-name').css('justify-content') == 'space-between' || $('.profile-name').css('justify-content') == 'space-around', 'message: The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, or space-around.');"
|
||||
"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 <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, or space-around.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
@ -835,39 +841,39 @@
|
||||
" #box-container {",
|
||||
" background: gray;",
|
||||
" display: flex;",
|
||||
" ",
|
||||
" height: 500px;",
|
||||
" height: 100%;",
|
||||
" ",
|
||||
" }",
|
||||
" #box-1 {",
|
||||
" background-color: dodgerblue;",
|
||||
" width: 200px;",
|
||||
" height: 200px;",
|
||||
" width: 25%;",
|
||||
" height: 50%;",
|
||||
" }",
|
||||
"",
|
||||
" #box-2 {",
|
||||
" background-color: orangered;",
|
||||
" width: 200px;",
|
||||
" height: 200px;",
|
||||
" width: 25%;",
|
||||
" height: 50%;",
|
||||
" }",
|
||||
" #box-3 {",
|
||||
" background-color: violet;",
|
||||
" width: 200px;",
|
||||
" height: 200px;",
|
||||
" width: 25%;",
|
||||
" height: 50%;",
|
||||
" }",
|
||||
" #box-4 {",
|
||||
" background-color: yellow;",
|
||||
" width: 200px;",
|
||||
" height: 200px;",
|
||||
" width: 25%;",
|
||||
" height: 50%;",
|
||||
" }",
|
||||
" #box-5 {",
|
||||
" background-color: green;",
|
||||
" width: 200px;",
|
||||
" height: 200px;",
|
||||
" width: 25%;",
|
||||
" height: 50%;",
|
||||
" }",
|
||||
" #box-6 {",
|
||||
" background-color: black;",
|
||||
" width: 200px;",
|
||||
" height: 200px;",
|
||||
" width: 25%;",
|
||||
" height: 50%;",
|
||||
" }",
|
||||
"</style>",
|
||||
"",
|
||||
|
||||
Reference in New Issue
Block a user