Where is my flex code syntactically incorrect?-CodePudding

I am trying to recreate my grid layout using flex. The flex code I have commented out is wrong I think due to me setting the width incorrectly in my .container class. The grid auto property assigns the columns automatically within my .even-columns class according to my current width assigned in .container but I'm not sure how to re-write this using flex.

Am I missing the correct width property or should I have assigned flex to my container instead?

/* CONTAINER CLASS */

.container {
  --max-width: 1110px;
  --padding: 1rem;
  width: min(var(--max-width), 100% - (var(--padding) * 2));
  margin-inline: auto;
}


/* EVEN COLUMNS CLASS */

.even-columns {
  display: grid;
  gap: 1rem;
  /* Trying same layout with flexbox
  display: flex;
  gap: 1rem;*/
}

@media (min-width: 50em) {
  .even-columns {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    /*Trying same layout with flexbox
    display: flex;
    flex-direction: column;*/
  }
}

<!-- Main -->
<main>
  <section>
    <div >
      <div >
        <div>
          <h1 >Bring everyone together to build better products.</h1>
          <p>Manage makes it simple for software developers to chorolate their projects and share them with other teams and colleagues. </p>
          <button >Get Started</button>
        </div>
        <div>
          <img src="images/illustration-intro.svg" alt="">
        </div>
      </div>
    </div>
  </section>


  <section>
    <div >
      <div >
        <div>
          <h2 >Manage your team</h2>
        </div>
        <div>
          <ul  role="list">
            <li>
              <h3 >Advertising</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis laborum at quia odio laudantium qui incidunt, laboriosam facere dolores deleniti quos quod reiciendis deserunt officiis explicabo impedit ducimus, expedita consequatur?</p>
            </li>

            <li>
              <h3 >Version Control</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis laborum at quia odio laudantium qui incidunt, laboriosam facere dolores deleniti quos quod reiciendis deserunt officiis explicabo impedit ducimus, expedita consequatur?</p>
            </li>

            <li>
              <h3 >Database Management</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis laborum at quia odio laudantium qui incidunt, laboriosam facere dolores deleniti quos quod reiciendis deserunt officiis explicabo impedit ducimus, expedita consequatur?</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>

CodePudding user response：

To start with your grid rules and flexbox rules display content in opposite ways.

Grid is working properly with min-width because you are telling it to fraction container when its width is 50em and more. So content is divided in two columns of the same row.

But the same mediquery with your flexbox code tells it to display content in column when width is more then 50em, which is complitely opposite.

In other words if we look at it from mobile-first perspective. Your grid rules will display content in column, but your flex rules will display content in row.

You have two solutions:

First: you can leave the code as it is and modify min-width to max-width and flexbox will work just fine.

Second: if you want mobile first design then you dont have to modify mediquery's application rule.

Just add flex-direction: row; to .even-columns that is inside mediaquery and add flex-direction: column; to .even-columns that is outside mediaquery

Additionally, if you want the columns to have the same width you will have to define width for the children of .even-columns

This is where grid goes better because using it you dont have do define all these styles that goes to container's children.

/* CONTAINER CLASS */

.container {
  --max-width: 1110px;
  --padding: 1rem;
  width: min(var(--max-width), 100% - (var(--padding) * 2));
  margin-inline: auto;
}


/* EVEN COLUMNS CLASS */

.even-columns {
  display: flex;
  gap: 1rem;
}

@media (max-width: 50em) {
  .even-columns {
    display: flex;
    flex-direction: column;
  }

}

.even-columns > div {
  min-width: 50%;
}

<!-- Main -->
<main>
  <section>
    <div >
      <div >
        <div>
          <h1 >Bring everyone together to build better products.</h1>
          <p>Manage makes it simple for software developers to chorolate their projects and share them with other teams and colleagues. </p>
          <button >Get Started</button>
        </div>
        <div>
          <img src="images/illustration-intro.svg" alt="">
        </div>
      </div>
    </div>
  </section>


  <section>
    <div >
      <div >
        <div>
          <h2 >Manage your team</h2>
        </div>
        <div>
          <ul  role="list">
            <li>
              <h3 >Advertising</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis laborum at quia odio laudantium qui incidunt, laboriosam facere dolores deleniti quos quod reiciendis deserunt officiis explicabo impedit ducimus, expedita consequatur?</p>
            </li>

            <li>
              <h3 >Version Control</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis laborum at quia odio laudantium qui incidunt, laboriosam facere dolores deleniti quos quod reiciendis deserunt officiis explicabo impedit ducimus, expedita consequatur?</p>
            </li>

            <li>
              <h3 >Database Management</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis laborum at quia odio laudantium qui incidunt, laboriosam facere dolores deleniti quos quod reiciendis deserunt officiis explicabo impedit ducimus, expedita consequatur?</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </section>