CSS3 flexbox

flexbox unleashed

Layouting in CSS

Layout modes in css

block & float
inline layout
inline-block
table layout
positioned layout
flexible box layout *
grid layout *

*) in development

Layouting in CSS

Next person I hear say "oh they're *only* a front-end person," I'm gonna make them vertically center text in a variable height element.

@brianlovesword

Is this common to you?


.float-container {
  float: left;
  width: 100%;
  background-color: #aaa;

}
.a, .b, .c {
  width: 33.33333%;
  float: left;
  box-sizing: border-box;
}

A

One sentence.

B

A medium amount of text, but still nothing really interesting to read here. I promise.

C

Yummy ipsum lorem kitten, bacon and mushroom. Rainbows rainbows pigeon wereunicorn app surprise, kittens pegasus delight unicorn wereunicorn rainbows. Pigeon unicorn surprise pony pigeon wereunicorn app app.

block & float

Most common layout mode today. Used in many frameworks and grid layouts, e.g. bootstrap

it is a hack - clearfix


.cf:before,
.cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.cf:after {
  clear: both;
}

/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
  *zoom: 1;
}

inline-block

the 4px "bug"



  One
  Two
  Three


nav a {
  display: inline-block;
  background: #ccc;
}

but wait...
there are hacks for that

remove spaces between elements
negative margins
skip closing tag
set font-size to zero

table layout

table layout to the rescue?!

even supports IE8!

we need to change stack order of elements in RWD

table layout - responsive



  Box One
  Box Two
  Box Three
  Box Four


.boxes {
  display: table;
  margin: 0 auto;
}
.box {
  display: table-cell;
  width: 25%;
  height: 15em;
  text-align: center;
  line-height: 15em;
  color: #fff;
}
.one { background: #333; }
.two {
  background:#fff;
  color:#333;
}
.three { background:#aaa; }
.four { background:#dc002e; }

table layout - responsive


/* 768px */
@media only screen and (max-width:48em) {
  .boxes {
    display:table;
    width:100%;
  }
  .box {
    display:block;
    width:100%;
  }
  .three { display:table-caption; }
  .four { display:table-header-group; }
  .one { display:table-footer-group; }
}

table layout - responsive

Box One

Box Two

Box Three

Box Four

WTF

positioned layout

designed for positioning elements without much interaction with other elements!

elements are taken out of flow

GSS - Grid stylesheets

wanna really rely on javascript for layouting?

shouldn't the browser do the layout?!

A new hope

CSS3 flexbox

CSS grid

CSS Grid

The grid property in CSS is the foundation of Grid Layout. It aims at fixing issues with older layout techniques like float and inline-block, which both have issues and weren't really designed for page layout.

CSS3 flexbox

The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

CSS3 flexbox

Note: 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.

CSS3 flexbox

see it in production...

the flexbox concept

the flex container has the ability to alter its items to best fill the available space

the flexbox concept

the flexbox layout is direction-agnostic as opposed to the regular layouts

flex container


.container {
  display: flex;
}

defining a flex container. all children are flex-items

container & items

container: flex-direction


.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

This establishes the main-axis, thus defining the direction flex items are placed in the flex container.

flex-direction

container: flex-wrap


.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property

flex-wrap

container: flex-flow


flex-flow: <‘flex-direction’> || <‘flex-wrap’>

This is a shorthand for flex-direction and flex-wrap

container: justify-content


.container {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

This defines the alignment along the main axis.

justify-content

container: align-items


.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

This defines the default behaviour for how flex items are laid out along the cross axis on the current line.

align-items

container: align-content


.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

This aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

align-content

flex-items

order


.item {
  order: integer;
}

By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container.

order

flex-grow


.item {
  flex-grow: number; /* default 0 */
}

This defines the ability for a flex item to grow if necessary.

flew-grow

flex-shrink


.item {
  flex-shrink: number; /* default 1 */
}

This defines the ability for a flex item to shrink if necessary.

flex-basis


.item {
  flex-basis: length | auto; /* default auto */
}

This defines the default size of an element before the remaining space is distributed.

flex


.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

This is the shorthand for flex-grow, flex-shrink and flex-basis combined.

align-self


.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

This allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

vendor prefixes


.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  flex: 0 1 auto;
}

vendor prefixes


.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.item {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
}

WTF

Sass / Autoprefixer

write a mixin


@mixin order($val) {
  -webkit-box-ordinal-group: $val;
  -moz-box-ordinal-group: $val;
  -ms-flex-order: $val;
  -webkit-order: $val;
  order: $val;
}

or use autoprefixer

Flexbox example

flexbox demo

Photo-Sources

Slide 1:
https://www.flickr.com/photos/raeallen/6141674518
Slide 2:
https://i.imgur.com/Q3cUg29.gif
Slide 4:
https://pbs.twimg.com/media/B2mW8NiCQAA6IIP.jpg
Slide 14:
http://cdn.alltheragefaces.com/img/faces/large/surprised-reaction-guy-l.png
Slide 15:
http://cdn.meme.am/instances/500x/59141167.jpg
Slide 52:
http://cdn.meme.am/instances/500x/51253042.jpg

CSS3 flexbox

flexbox unleashed

Layouting in CSS

Layout modes in css

Layouting in CSS

Layouting in CSS

Is this common to you?

A

B

C

block & float

it is a hack - clearfix

inline-block

but wait...there are hacks for that

table layout

table layout - responsive

table layout - responsive

table layout - responsive

WTF

positioned layout

positioned layout

GSS - Grid stylesheets

A new hope

CSS Grid

CSS3 flexbox

CSS3 flexbox

CSS3 flexbox

the flexbox concept

the flexbox concept

flex container

container & items

container: flex-direction

flex-direction

container: flex-wrap

flex-wrap

container: flex-flow

container: justify-content

justify-content

container: align-items

align-items

container: align-content

align-content

flex-items

order

order

flex-grow

flew-grow

flex-shrink

flex-basis

flex

align-self

vendor prefixes

vendor prefixes

WTF

Sass / Autoprefixer

Flexbox example

Photo-Sources

but wait...
there are hacks for that