notes from http://flexbox.io. source code available at https://github.com/wesbos/What-The-Flexbox. nice covers from http://coverr.co/
flex-direction
can be row
(main is left-right, cross axis is top-bottom) and column
(vice versa). -reverse
flips only main axis
- 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
- like z-index, just set
order:x
to set order
- 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
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)
- 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
- individually manipulating the align of flex items - add
align-self:stretch/center/baseline
are useful
- 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
- default
flex-grow
for anything is 0. flex-basis: 400px; flex-shrink: 1; flex-grow: 1
is the same asflex: 1 1 400px
- 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
- <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']);
});
.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%;
}
}
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
})
})
a lot of stuff i probably wont need...
- to have
align-items: center
andalign-items: stretch
just have nested flexboxes...
use a nested flex to put CTA buttons independently at the bottom of the container
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); }
.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; }
.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;
}
flex:1
on items to redistribute space evenlyheight: 100vh