Flexbox Tips

Flexbox Tips

  • Use wireframes to plan out all of your flex containers

    • Identify which flex containers will have a row direction and which will have a column direction?

    • Identify where you will have nested flex containers (i.e. containers in containers)

  • Keep is simple, use divs for all of your flex containers

    • Technically any element can be used as a flex

  • Use classes to name your flex containers

  • Use a consistent naming convention to identify your flexbox container classes

    • For example, in this class we will have all flex container class names end with “-container” for example (.main-container) to easily help you distinguish between containers and other elements.

  • Use the “guideline” css style (provided at the top of your css files) to help you visually identify your containers

  • Take small steps, constantly check the results of each change in your browser (i.e. do not add a bunch of styles and then only periodically check the results in the browser - this is a sure way to get lost)