Try Documentalist,
my app that offers fast, offline access to 190+ programmer API docs.
Links
- http://flexbox.malven.co/
- https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b
- https://codepen.io/enxaneta/full/adLPwv/ : visual showcase of flexbox properties
- https://css-tricks.com/flex-grow-is-weird/
- https://flexbox.io/ : 20 video tutorials, from beginning to some advanced layouts
- https://chriswrightdesign.com/experiments/using-flexbox-today/
- https://www.smashingmagazine.com/2016/11/css-grids-flexbox-and-box-alignment-our-new-system-for-web-layout/
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- http://www.flexboxpatterns.com/home
- https://philipwalton.github.io/solved-by-flexbox/
- https://webdesign.tutsplus.com/tutorials/a-comprehensive-guide-to-flexbox-alignment--cms-30183
- https://hacks.mozilla.org/2018/01/new-flexbox-guides-on-mdn/?utm_source=frontendfocus&utm_medium=email
- https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b
- https://codepen.io/enxaneta/full/adLPwv/ : visual showcase of flexbox properties
- https://css-tricks.com/flex-grow-is-weird/
- http://yoksel.github.io/flex-cheatsheet/, https://news.ycombinator.com/item?id=13877926
- https://www.isotoma.com/blog/2016/09/07/going-all-in-on-flexbox/
- https://github.com/afonsopacifer/awesome-flexbox
- http://www.flexboxpatterns.com/home
- http://codepen.io/enxaneta/full/adLPwv/
- https://github.com/afonsopacifer/awesome-flexbox
- http://chriswrightdesign.com/experiments/flexbox-adventures/, https://news.ycombinator.com/item?id=8782752
- http://chriswrightdesign.com/experiments/using-flexbox-today/
- http://css-tricks.com/snippets/css/a-guide-to-flexbox/
- http://philipwalton.github.io/solved-by-flexbox/
- http://css-tricks.com/snippets/css/complete-guide-grid/
- http://flexboxin5.com/, https://news.ycombinator.com/item?id=9137515
- http://codepen.io/team/lincolnloop/blog/flexboxfridays
- http://www.slideshare.net/zomigi/leveling-up-with-flexbox-smashing-conference
- http://jonibologna.com/flexbox-cheatsheet/
- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes#Flex_item_considerations
- http://bocoup.com/weblog/dive-into-flexbox/
- http://dundalek.com/css3-flexbox-reference/
- http://flexbox.io/#/
- http://book.mixu.net/css/
- http://jonibologna.com/flexbox-cheatsheet/
- https://github.com/corysimmons/lost
- http://gridlex.devlint.fr
- http://www.flexboxpatterns.com/
- https://github.com/philipwalton/flexbugs
- https://davidwalsh.name/flexbox-layouts
- http://www.sketchingwithcss.com/samplechapter/
- https://24ways.org/2015/grid-flexbox-box-alignment-our-new-system-for-layout/
- https://www.smashingmagazine.com/2015/12/website-layout-tools-compared-flexbox-vs-susy/
- http://codepen.io/vasansr/pen/PZOJXr?editors=1100 : a responsive table using flexbox
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
- https://medium.com/@Heydon/flexbox-grid-finesse-4d22b80bfee1#.ivfv9kbuo
- https://medium.com/@samserif/flexbox-s-best-kept-secret-bd3d892826b6#.4rjmcrfmh
- http://my.safaribooksonline.com/book/web-development/css/9781449372736/chapter-7dot-structure-and-layout/intrinsic_sizing#X2ludGVybmFsX0h0bWxWaWV3P3htbGlkPTk3ODE0NDkzNzI3MzYlMkZzdGlja3lfZm9vdGVycyZxdWVyeT0=https://css-tricks.com/designing-a-product-page-layout-with-flexbox/#more-236836https://medium.com/@samserif/flexbox-s-best-kept-secret-bd3d892826b6#.qhof2xv5d
Implementations
Properties of flex containers:
.container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <'flex-direction'> || <'flex-wrap'>;
align-items: flex-start | flex-end | center | stretch | baseline;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-content: flex-start | flex-end | center | stretch | space-between | space-around;
}Properties of flex items:
.items {
align-self: flex-start | flex-end | center | baseline | stretch;
flex-grow: 1;
flex-shrink: 2;
flex-basis: 100px | 3em | 50%; // like min-width but for flex items only
order: 3;
}Example layouts
[ [left] [right] ]
div display:flex
div
left
div margin-left: auto # this pushes right all the way to the right
rightA different version that uses
justify-content: space-between
div display:flex
div
left
div margin-left: auto
right