Use the flex Shorthand Property 12

Guys i’m stuck here, my coding is not working, it keeps stating i should use the flex property for #box-1 and #box-2, please help?
Describe your issue in detail here.

  **Your code so far**

<style>
#box-container {
  display: flex;
  height: 500px;
}
#box-1 {
  background-color: dodgerblue;

  height: 200px;
  flex:2 2 150px ;
}

#box-2 {
  background-color: orangered;

  height: 200px;
 flex:1 1 150px;
}



</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/100.0.4896.75 Safari/537.36 Edg/100.0.1185.39

Challenge: Use the flex Shorthand Property

Link to the challenge:

#box-1 {
  flex:2 2 150px ;
}

the code is correct you have an issue with formatting the first #box-1

clean the format and it will pass. it passed for me when it was typed in the right format.

@ Sboony, how do i clean the format?

.class {
   flex: 1 1 20%;
}

notice there aren’t space before ;

although i feel i am giving you the answer, formatting will be dealt with automatically later in your career.

but you should keep an eye for these small stuff it may affect you later when you try your hand in testing

Very true @Sboony , these is more of direct answer but is ok since my code is correct, thank you very much :+1:

1 Like