USED FLEXBOX

@mixin flexbox {
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -moz-flex;
       display: -webkit-flex;
       display: flex;
       display: box;
}

.flex-container {

      @include flexbox;

       __________________;

}

.flex-item {

      _____________;

}

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">4</li>
</ul>​

WHEN TO USE FLEXBOX

Scaling

Vertical alignment

Horizontal alignment

Ordering

Browser Support

Flexbox properties

.flex-container {     display: -webkit-box;     /* 2009 - Chrome, Safari , iOS Safari */     display: -moz-box;          /* 2009 - Firefox */     display: -ms-flexbox;      /* early 2012 - IE 10 */     display: -webkit-flex;     /* 2012 - Chrome */     display: flex;                     /* 2012 - Opera 12.1, Firefox 22+, Android 4.4+, iOS 7.1+ */     display: box;                     /* Android 2.1+, iOS 3.2+ */ }

Flex container

 

.flex-item {     -webkit-box-ordinal-group: 2;   /* 2009 - Chrome, Safari , iOS Safari */     -moz-box-ordinal-group: 2;        /* 2009 - Firefox */     -ms-flex-order: 2;                          /* early 2012 - IE 10 */     -webkit-order: 2;                           /* 2012 - Chrome */     order: 2;                                          /* 2012 - Opera 12.1, Firefox 22+ */ }

Flex item

css processor's

@mixin

@mixin flexbox {
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -moz-flex;
       display: -webkit-flex;
       display: flex;
       display: box;
}

.flex-container {

      @include flexbox;

}

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

.order {
    @include orders(2px);
}

/* Compiles to this (with autoprefixer set to support last 2 versions of all browsers) */

.scss

.flex-container {

      display: flex;
}

.css

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

Flex Container properties

• flex-direction

• flex-wrap

• flex-flow

• justify-content

• align-items

• align-content

 

flex-direction

 Syntax

flex-direction:  row;

flex-direction:  row-reverse;

flex-direction:  column;

flex-direction:  column-reverse;

@mixin flexbox {
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -moz-flex;
       display: -webkit-flex;
       display: flex;
       display: box;
}

.flex-container {

      @include flexbox;

       __________________;

}

.flexdirection {

      flex-direction: row |row-reverse |column |column-reverse ;

}

.flex-item {

      _____________;

}

<ul class="flex-container flexdirection">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>​

flex-wrap

Syntax

flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

@mixin flexbox {
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -moz-flex;
       display: -webkit-flex;
       display: flex;
       display: box;
}

.flex-container {

      @include flexbox;

       __________________;

}

.flexwrap {

      flex-wrap: nowrap |wrap |wrap-reverse ;

}

.flex-item {

      _____________;

}

<ul class="flex-container flexwrap">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>​

Flex flow

 Syntax

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

flex-flow: row nowrap;
flex-flow: column wrap;
flex-flow: column-reverse wrap-reverse;

flex-flow: row wrap;

flex-flow: row-reverse wrap;

Justify content

Syntax

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

@mixin flexbox {
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -moz-flex;
       display: -webkit-flex;
       display: flex;
       display: box;
}

.flex-container {

      @include flexbox;

       __________________;

}

.justifycontent {

      justify-content: flex-start | flex-end | center | space-between                                 | space-around ;

}

.flex-item {

      _____________;

}

<ul class="flex-container justifycontent">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>​

Align items

 Syntax

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

align-items: stretch;

@mixin flexbox {
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -moz-flex;
       display: -webkit-flex;
       display: flex;
       display: box;
}

.flex-container {

      @include flexbox;

       __________________;

}

.alignitems {

     aling-items: flex-start | flex-end | center | baseline | stretch ;}

.flex-item {

      _____________;

}

<ul class="flex-container alignitems">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>​

Align content

Syntax

align-content: flex-start;

align-content: flex-end;

align-content: center;

@mixin flexbox {
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -moz-flex;
       display: -webkit-flex;
       display: flex;
       display: box;
}

.flex-container {

      @include flexbox;

       __________________;

}

.aligncontent {

      align-content: flex-start | flex-end | center | space-between                                 | space-around | stretch ;

}

.flex-item {

      _____________;

}

<ul class="flex-container aligncontent">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
</ul>​

Flex items properties

• order
• align-self
• flex-grow
• flex-shrink
• flex-basis

Order

Syntax

order: <number> ;

@mixin flexbox {
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -moz-flex;
       display: -webkit-flex;
       display: flex;
       display: box;
}

.flex-container {

      @include flexbox;

       __________________ ;

      .flextext {________ ; }

}

@media only screen and(max-width: 320px) {

      .flex-container {

            flex-wrap: wrap;

            .fleximage {

                  order: 1;

             }

       }

}

@media only screen and(max-width: 1024px) {

      .flex-container {

            flex-wrap: wrap;

            .fleximage {

                  order: 2;

             }

       }

}

Align self

Syntax

align-self: flex-start ;​​

align-self: flex-end ;

align-self: center ;

align-self: baseline ;

align-self: stretch ;

Flex grow

flex-grow: 1 ;

flex-grow: 1 ;

flex-grow: 1 ;

flex-grow: 1 ;

flex-grow: 1;

flex-grow: 1;

flex-grow: 1;

flex-grow: 1;

flex-grow: 2;

@mixin flexbox {
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -moz-flex;
       display: -webkit-flex;
       display: flex;
       display: box;
}

.flex-container {

      @include flexbox;

       __________________;

}

.value1 {

      flex-grow: 1 ;

}

.value2 {

      flex-grow: 2 ;

}

.

.flex-item {

      _____________;

}

<ul class="flex-container">
  <li class="flex-item value1">1</li>
  <li class="flex-item value1">2</li>
  <li class="flex-item value2">3</li>
  <li class="flex-item value1">4</li>
  <li class="flex-item value1">5</li>
</ul>​

Flex shrink

flex-shrink: 1 ;

flex-shrink: 1 ;

flex-shrink: 0 ;

@mixin flexbox {
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -moz-flex;
       display: -webkit-flex;
       display: flex;
       display: box;
}

.flex-container {

      @include flexbox;

       __________________;

}

.flexshrink {

      flex-shrink: 0 ;

}

.flex-item {

      flex-shrink: 1 ;

      _____________;

}

<ul class="flex-container">
       <li class="flex-item">1</li>
       <li class="flex-item">2</li>
       <li class="flex-item flexshrink">3</li>
       <li class="flex-item">4</li>
       <li class="flex-item">5</li>
       <li class="flex-item">6</li>
       <li class="flex-item">7</li>
       <li class="flex-item">8</li>
</ul>

Flex basis 

flex-basis: auto ;

flex-basis: auto ;

flex-basis: 350px ;

@mixin flexbox {
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -moz-flex;
       display: -webkit-flex;
       display: flex;
       display: box;
}

.flex-container {

      @include flexbox;

       __________________;

}

.flexbasis {

      flex-basis: 350px ;

}

.flex-item {

      flex-basis: auto ;

      _____________;

}

<ul class="flex-container">
       <li class="flex-item">1</li>
       <li class="flex-item">2</li>
       <li class="flex-item">3</li>
       <li class="flex-item flexbasis">4</li>
       <li class="flex-item">5</li>
</ul>

Flex

flex:   2   2   0% ;

flex-grow

flex-shrink

flex-basis