Last active
May 5, 2021 10:53
-
-
Save exaucae/c03595c65e54697bab95cea5b4b99d35 to your computer and use it in GitHub Desktop.
flexbox ressources
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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