cheat sheet from flexbox.io

flexbox-cheat-sheet.md

notes from http://flexbox.io. source code available at https://github.com/wesbos/What-The-Flexbox. nice covers from http://coverr.co/

---

to start, set your container's class to display:flex or none of the below will work

---

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 and flex 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. has flex-start by default and flex-end also exists.
• spacing: space-between and space-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 exists
• baseline 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

10. the flex property

• 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 for flex-grow and flex-shrink

11. flex-grow, flex-shrink, flex-basis

• default flex-grow for anything is 0.
• flex-basis: 400px; flex-shrink: 1; flex-grow: 1 is the same as flex: 1 1 400px

12. flex-basis vs flex-wrap

• 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 hard height instead of a min-height - then columns wrap over to the side based on your flex-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 and align-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 evenly
• height: 100vh