3-Column preview card component using CSS flexbox

Community feedback

• 

  Stephen Yu•150

  @StephenYu2018Posted over 1 year ago

  Hi Paul,

  Flexbox generally focuses much more on the positioning of its items rather than the sizing of its items. Giving size to flex items generally works the same way as giving size to most other elements.

  I think the cards' children elements overflow downwards off the card itself when the browser's viewport is between 481px and 800px is because each card is set to a fixed width rather than auto (initial value when you don't set the width or height). The card is to remain at that fixed height, but because the width of the card can't fit all their children, the children elements are squeezed and pushed downwards, even running off the card in this case. Also, by setting the max-width of the card instead of the width, the width is initialized to auto. The browser tries to fit all the card's within the viewport's width, even if it means decreasing the width of the cards and squeezing its children downwards.

  Also, when you use media queries to change from flex: row; to flex: column;, you gave max-width in em. I don't see a good reason for this and I think it would've been much less confusing to read, both for you and others, if you used px, since most browsers display the viewport size in px.

  Marked as helpful

  0

  ---

  

  P

  Paul•470

  @mayor-creatorPosted over 1 year ago

  @StephenYu2018 Thank you for the insightful feedback.

  1

  

  Stephen Yu•150

  @StephenYu2018Posted over 1 year ago

  @mayor-creator No problem

  0