Control

Orientation
Distribution
Space
Order

History

19 years

2009

Syntax

CanIUse

    .container {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }

    .element {
      -webkit-box-flex: 1;
          -webkit-flex: 1 1 0;
              -ms-flex: 1 1 0;
                  flex: 1 1 0;
    }

Syntax

Sass

sass-flex-mixin

Less

PostCSS

autoprefixer

Flex.less

.container {

}

.item {

}

.shorthands {

    .container {

        /* flex-flow: <'flex-direction'> */
        flex-flow: row;
        flex-flow: row-reverse;
        flex-flow: column;
        flex-flow: column-reverse;

        /* flex-flow: <'flex-wrap'> */
        flex-flow: nowrap;
        flex-flow: wrap;
        flex-flow: wrap-reverse;

        /* flex-flow: <'flex-direction'> and <'flex-wrap'> */
        flex-flow: row nowrap;
        flex-flow: column wrap;
        flex-flow: column-reverse wrap-reverse;

        /* Global values */
        flex-flow: inherit;
        flex-flow: initial;
        flex-flow: unset;

    }

    .item {
        /* 0 0 auto */
        flex: none;

        /* One value, unitless number: flex-grow */
        flex: 2;

        /* One value, width/height: flex-basis */
        flex: 10em;
        flex: 30px;
        flex: auto;
        flex: content;

        /* Two values: flex-grow | flex-basis */
        flex: 1 30px;

        /* Two values: flex-grow | flex-shrink */
        flex: 2 2;

        /* Three values: flex-grow | flex-shrink | flex-basis */
        flex: 2 2 10%;

        /* Global values */
        flex: inherit;
        flex: initial;
        flex: unset;
    }

}

How  flex-grow really works

flex-grow is weird. Or is it?

Flexbox adventures

And  flex-shrink

Flex Item shrunk = Basis - (Shrink num / Total shrink nums * overflow space)

Flexbox in...

Bootstrap

Foundation

Basscss

SuitCSS

We use Flexbox in...

InfoJobs

Coches.net

Fotocasa

Vibbo

fallbacks() {

<!--[if IE 9]>
  <style type="text/css">
      .container {
      	display:table;
      	width:100%;
      	border-collapse:collapse;
      	border:none;
      	position: relative;
      	z-index: 10;
      }

      .element  ul {
      	float:none;
      	display:table-row;
      	text-align:center;
      }

      .element ul li {
      	float:none;
      	display:table-cell;
      	margin:0;
      }
  </style>
<![endif]-->

.no-js,
.no-flexbox {
  .page-wrap {
    width: 100%;
  }
  .main-sidebar {
    float: right;
  }
  ...
}

.container {
    /* for older browsers */
    display: table;
    
    /* support browsers */
    display: flex;
}

Flexibility

<script src="flexibility.js"></script>

.container {
    -js-display: flex;
    display: flex;
}

https://github.com/10up/flexibility

PostCSS Flexibility

.container {
    display: flex;
}

.container {
    -js-display: flex;
    display: flex;
}

https://github.com/7rulnik/postcss-flexibility​

}

.animation {

flex-directon

flex-wrap

order

flex

flex-grow

flex-shrink

flex-basis

justify-content

align-items

align-self

align-content

}

.learnFlexbox {

Flexbox Froggy

Workshop Flexbox

}