Skip to content

Instantly share code, notes, and snippets.

@exaucae
Last active May 5, 2021 10:53
Show Gist options
  • Save exaucae/c03595c65e54697bab95cea5b4b99d35 to your computer and use it in GitHub Desktop.
Save exaucae/c03595c65e54697bab95cea5b4b99d35 to your computer and use it in GitHub Desktop.
flexbox ressources
Flexbox layout is most appropriate to the components of an application, and small-scale layouts,
while the Grid layout is intended for larger scale layouts.
The main idea behind the flex layout is to give the container the ability to alter its items’ width & height (and order)
to best fill the available space.
shorthand properties:
- flex: [flex-grow] [flex-shrink] [flex-basis];
- flex-flow: [flex-direction] [flex-wrap]
References:
- w3 flexbox spec: : https://www.w3.org/TR/css-flexbox-1/
- css-tricks go-to cheatsheet: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- flexbugs curated list of flexbox bugs & tricks: https://github.com/philipwalton/flexbugs
- flexbox playground: https://yoksel.github.io/flex-cheatsheet/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment