Four card feature section solution with Flexbox

What are you most proud of, and what would you do differently next time?

I had a hard time making the desktop layout, and I have to read the flex box documentation several times to understand it.

What challenges did you encounter, and how did you overcome them?

When I initially started using flexbox, I encountered a few challenges. The most notable were understanding the difference between justify-content and align-items, and figuring out when to use flex-direction: column versus flex-direction: row.

I addressed these challenges by doing a lot of practice and experimentation. I also found it helpful to use online resources.

One trick I found particularly useful was to remember that justify-content affects the horizontal alignment and align-items affects the vertical alignment when flex-direction is row, but this gets reversed when flex-direction is column. Having this rule of thumb helped me a lot in understanding how to align items using flexbox.

What specific areas of your project would you like help with?

• I had to eyeball the position of the cards in desktop view. Maybe someone had a better solution?

  .team-builder {
    align-self: self-start;
    transform: translateX(52%);
    margin: 0 auto;
  }

  .karma {
    align-self: self-end;
    transform: translateX(-55%);
    margin: 0 auto;
  }
  .supervisor {
    align-self: center;
    transform: translateX(50%);
  }
  .calculator {
    align-self: center;
    transform: translateX(-50%);
  }
}