gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

removed flex-basis from flex-grow challenge (#13947)

Browse Source
This commit is contained in:
cdrainxv
2017-03-17 13:48:40 -06:00
committed by Heather K
parent 179da995c5
commit 59c543e7b4
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
seed/challenges/01-responsive-web-design/css-flexbox.json
View File

@ -942,16 +942,15 @@
" display: flex;", " display: flex;",
" height: 500px;", " height: 500px;",
" }", " }",
" ",
" #box-1 {", " #box-1 {",
" background-color: dodgerblue;", " background-color: dodgerblue;",
" flex-basis: 10em; /* See next challenge! */",
" height: 200px;", " height: 200px;",
" ", " ",
" }", " }",
"", " ",
" #box-2 {", " #box-2 {",
" background-color: orangered;", " background-color: orangered;",
" flex-basis: 10em; /* See next challenge! */",
" height: 200px;", " height: 200px;",
" ", " ",
" }", " }",
@ -977,10 +976,10 @@
"id": "587d78ae367417b2b2512afd", "id": "587d78ae367417b2b2512afd",
"title": "Use the flex-basis Property to Set the Initial Size of an Item", "title": "Use the flex-basis Property to Set the Initial Size of an Item",
"description": [ "description": [
"The previous example included <code>flex-basis</code> to help demonstrate how the <code>flex-grow</code> property works. The <code>flex-basis</code> property specifies the initial size of the item before CSS makes adjustments with <code>flex-shrink</code> or <code>flex-grow</code>.", "The <code>flex-basis</code> property specifies the initial size of the item before CSS makes adjustments with <code>flex-shrink</code> or <code>flex-grow</code>.",
"The units used by the <code>flex-basis</code> property are the same as other size properties (<code>px</code>, <code>em</code>, <code>%</code>, etc.). The value <code>auto</code> sizes items based on the content.", "The units used by the <code>flex-basis</code> property are the same as other size properties (<code>px</code>, <code>em</code>, <code>%</code>, etc.). The value <code>auto</code> sizes items based on the content.",
"<hr>", "<hr>",
"Set the initial size of the boxes using <code>flex-basis</code>. Add the CSS property <code>flex-basis</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of 10em and <code>#box-2</code> a value of 20em." "Set the initial size of the boxes using <code>flex-basis</code>. Add the CSS property <code>flex-basis</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of <code>10em</code> and <code>#box-2</code> a value of <code>20em</code>."
], ],
"challengeSeed": [ "challengeSeed": [
"<style>", "<style>",
@ -988,19 +987,20 @@
" display: flex;", " display: flex;",
" height: 500px;", " height: 500px;",
" }", " }",
" ",
" #box-1 {", " #box-1 {",
" background-color: dodgerblue;", " background-color: dodgerblue;",
" ",
" height: 200px;", " height: 200px;",
" ",
" }", " }",
"", " ",
" #box-2 {", " #box-2 {",
" background-color: orangered;", " background-color: orangered;",
" ",
" height: 200px;", " height: 200px;",
" ",
" }", " }",
"</style>", "</style>",
"", " ",
"<div id=\"box-container\">", "<div id=\"box-container\">",
" <div id=\"box-1\"></div>", " <div id=\"box-1\"></div>",
" <div id=\"box-2\"></div>", " <div id=\"box-2\"></div>",
@ -1008,9 +1008,9 @@
], ],
"tests": [ "tests": [
"assert($('#box-1').css('flex-basis') != 'auto', 'message: The <code>#box-1</code> element should have a <code>flex-basis</code> property.');", "assert($('#box-1').css('flex-basis') != 'auto', 'message: The <code>#box-1</code> element should have a <code>flex-basis</code> property.');",
"assert(code.match(/#box-1\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-basis:\\s*?10em;/g), 'message: The <code>#box-1</code> element should have a <code>flex-basis</code> value of 10em.');", "assert(code.match(/#box-1\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-basis:\\s*?10em;/g), 'message: The <code>#box-1</code> element should have a <code>flex-basis</code> value of <code>10em</code>.');",
"assert($('#box-2').css('flex-basis') != 'auto', 'message: The <code>#box-2</code> element should have the <code>flex-basis</code> property.');", "assert($('#box-2').css('flex-basis') != 'auto', 'message: The <code>#box-2</code> element should have the <code>flex-basis</code> property.');",
"assert(code.match(/#box-2\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-basis:\\s*?20em;/g), 'message: The <code>#box-2</code> element should have a <code>flex-basis</code> value of 20em.');" "assert(code.match(/#box-2\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-basis:\\s*?20em;/g), 'message: The <code>#box-2</code> element should have a <code>flex-basis</code> value of <code>20em</code>.');"
], ],
"solutions": [], "solutions": [],
"hints": [], "hints": [],