Tell us what’s happening:
**Your code so far**
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
display:flex;
flex-grow:2;
flex-shrink:2;
flex-basis:150px;
height: 200px;
}
#box-2 {
background-color: orangered;
display:flex;
flex-grow:1;
flex-shrink:1;
flex-basis:150px;
height: 200px;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36
.
Challenge: Use the flex Shorthand Property
Link to the challenge:
Welcome to the forums.
When asking for help follow 3 simple steps:
What is happening/not happening?
Show us your code.
What is the problem?
You can read about flex in the meantime:
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also...
Est. reading time: 15 minutes
Hi, you got the required result, but the challenge is about shortening all three of flex-grow
, flex-shrink
, and flex-basis
together into one property flex
. Read the challenge description to see how you can do that and you will pass the challenge.
system
Closed
October 10, 2021, 6:32am
4
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.