notes from http://flexbox.io. source code available at https://github.com/wesbos/What-The-Flexbox. nice covers from http://coverr.co/
display:flex
or none of the below will work
to start, set your container's class to 3. flex-direction
flex-direction
can be row
(main is left-right, cross axis is top-bottom) and column
(vice versa). -reverse
flips only main axis
4. flex-wrap
- throw out existing knowledge of
floats
. - by default flex items respect the given width of their containers first even if they have a width
- but if you define
flex-wrap: wrap
they wrap around and split up the vertical distance of their containers wrap-reverse
exists, dont use- can define flex item width to wrap nicely - use
width: calc(33.3% -20px); margin: 10px
if want to have margin - mixing
flex wrap
andflex direction
works
5. ordering
- like z-index, just set
order:x
to set order
6. alignment and centering: justify-content
- horizontal centering:
justify-content: center
. hasflex-start
by default andflex-end
also exists. - spacing:
space-between
andspace-around
to insert spaces. - vertical centering:
flex-direction: column
, give items height,justify-content: center
7. alignment and centering: align-items
align-items
deals with cross axis.align-items: center; height: 100vh
flex-end
also existsbaseline
to align based on base of text not of the box (mainly for if boxes are diff sizes)
8. alignment and centering: align-content
- same params as
justify-content
but does it for the cross axis. basically helps figure out vertical spacing when wrapping .parent {display:flex;height:100vh;flex-wrap:wrap;align-content:space-between} .child{width:33.33%}
flex-start
will not stretch height for you- can mix with
justify-content: center
9. align-self
- individually manipulating the align of flex items - add
align-self:stretch/center/baseline
are useful
flex
property
10. the - just a single
flex:1
on each item makes it distribute equally. will divvy up space by the share of sum of flex values. - but
flex
is really sugar forflex-grow
andflex-shrink
flex-grow
, flex-shrink
, flex-basis
11. - default
flex-grow
for anything is 0. flex-basis: 400px; flex-shrink: 1; flex-grow: 1
is the same asflex: 1 1 400px
flex-basis
vs flex-wrap
12. - if you mess with individual flex items that are wrapped,
grow
,shrink
, etc only work on the row that they are on. this is nice. - if you have
flex-direction: column
and a hardheight
instead of amin-height
- then columns wrap over to the side based on yourflex-basis
13. xbrowser support and autoprefixer
- <autoprefixer.github.io>
- or use <gulpjs.com> to do the build step
var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('styles', function() {
gulp.src('css/styles.css')
.pipe(autoprefixer())
.piper(gulp.dest('build'))
});
gulp.task('watch', function() {
gulp.watch('css/styles.css', ['styles']);
});
CODEALONGS!!!
14. navigation
.flex-nav ul {
border: 1px solid black;
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.flex-nav li {
flex: 3;
}
.flex-nav .social {
flex: 1;
}
@media all and (max-width: 1000px) {
.flex-nav ul {
flex-wrap: wrap;
}
.flex-nav li {
flex: 1 1 50%
}
.flex-nav .social {
flex: 1 1 25%
}
}
@media all and (max-width: 500px) {
.flex-nav li {
flex-basis: 100%;
}
}
15. Mobile content reordering (into burger menu) with Flexbox
for the 500px media query:
.wrapper { /* flex container */
display: flex;
flex-direction: column;
}
.wrapper > * { /* every flex item */
order: 999;
}
.flex-nav {
order: 1;
}
.toggleNav {
display: block;
}
use jquery to help toggle nav and have your flexbox css react to .open
$(function() {
$('.toggleNav').on('click', function() {
$('.flex-nav ul').toggleClass('open');
// $('.flex-nav ul').slideToggle(); // cant use because it requires display: block and we need display: flex
})
})
16. Nesting flexbox
a lot of stuff i probably wont need...
- to have
align-items: center
andalign-items: stretch
just have nested flexboxes...
17. Flexbox pricing grid
use a nested flex to put CTA buttons independently at the bottom of the container
18. equal height columns
when you are wrapping into rows and some items have different heights than others
.container { display: flex; flex-wrap: wrap; justify-content: center }
.item { flex: 1 1 calc(33.33% - 20px); }
19. single line form
.cover {
display: flex;
justify-content: center;
align-items: center;
}
.flex-form {
display: flex;
border: 20px solid rgba (0,0,0,0.3);
border-radius: 5px;
}
input[type="search"] { flex-basis: 50px; }
20. mobile app layout
.app-wrap {
display: flex;
flex-direction: column;
}
.app-wrap > * {
flex: 1 1 auto
}
.app-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.content {
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
}
.icon-bar {
display: flex;
}
.icon-bar a {
flex: 1;
}
misc
flex:1
on items to redistribute space evenlyheight: 100vh