"CSS Flexbox" Section improvement

[mreed4]

freeCodeCamp.org

I feel like the “CSS Flexbox” section could be slightly improved upon by adding labels to the objects.

Below is the code I threw together to label the objects. I do not claim this code to be the most elegant, semantic, nor efficient. I took the time to make it more visually appealing.

<style>
  #box-container {
    display: flex;
    height: 500px;
    /* This is the area the user/student will add 'flex-direction' to */
  }
  div div { /* NEW: Selects both child divs */
    font-size: 50px;
    text-align: center;
    line-height: 250px;
    font-weight: bold;
  }

  div span { /* NEW: Selects the span child of div */
    opacity: .2;
    color: white;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 50%;
    height: 50%;
  }

  #box-2 {
    background-color: orangered;
    width: 50%;
    height: 50%;
  }
</style>

<div id="box-container">
  <div id="box-1"><span>1</span></div> <!-- Edited code to add span and label -->
  <div id="box-2"><span>2</span></div> <!-- Ditto -->
</div>

[Sky020]

Welcome there,

If by “labels” you mean code comments, then we have specifically been removing comments in code to help the internationalisation (translation) of the curriculum.

It is mostly a case of comments being more difficult to maintain and translate.

[mreed4]

Sorry, not comments.

The orange and blue divs should have “1” and “2” on them (in the HTML), such that when row-reverse or column is specified in CSS, the user can use the numbers (in addition to the colors) to see how/where they move.

[Sky020]

Ah…my bad. I missed that difference. That is fair point, and could be easily added.

Thank you, for the clarification.

[mreed4]

I added it in the code, but my solution probably not the best practice. I could have easily selected

#box-1, #box-2 { <code> }

not

div div { <code> }