CSS flexbox

Flexbox

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
• Interactive Guides
  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

Safe Justify-Content

• When using justify-content: center on parent flex container, during shrinking width, the items go out of viewports and inaccessible
• Use justify-content: safe center to change the behavior when items try to go out of viewport and instead change to flex-start automatically
• https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container
• https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content#browser_compatibility
• https://caniuse.com/mdn-css_properties_justify-content_flex_context_safe_unsafe