CSS Flex

Community feedback

• 

  Rebecca Padgett•1,840

  @bccpadgePosted over 1 year ago

  Hello @sanyomor-01. Welcome to Frontend Mentor Community!! 🎉

  When building these projects the best approach is start Mobile-first workflow and then do desktop. To answer your question, by default elements are column and you can change the layout using <flex-direction> CSS property.

  Here is a CSS Grid example below.

  HTML📃:

  <main>
      <article>
         <div class="flex-1">Flexbox group 1</div>
         <div class="flex-2">Flexbox group 2</div>
        </article>
      </main>
  
  

  CSS🎨:

  • You can use flexbox and or CSS Grid in most every project. CSS Grid saves you few lines of CSS as well.

  /* Using CSS Grid places content in the center of the page*/
  main {
    display: grid;
    place-content: center;
    min-height: 100vh;
  }
  /*Grid template columns gives you two columns side by side*/
  @media (min-width: 50em) {
    article {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
  }
  

  Here is my solution to this challenge Results summary component

  Hope that I answer your question and don't hesitate to reach out to me if you have any questions

  Marked as helpful

  1