android-logo

CSS Flexbox

The Flexible Box Layout Module simplifies the creation of flexible responsive layout structures without the use of floats or positioning. When we say flexbox is one-dimensional, we are referring to the fact that it only works with one dimension at a time — either a row or a column.

PropertyValues
displayflex | inline-flex
flex-directionrow | row-reverse | column | column-reverse
flex-wrapnowrap | wrap | wrap-reverse
justify-contentflex-start | flex-end | center | space-between | space-around | space-evenly
align-itemsflex-start | flex-end | center | stretch | baseline
align-contentflex-start | flex-end | center | stretch | space-between | space-around
align-selfauto | flex-start | flex-end | center | baseline | stretch
flex-growvalue - default 0
flex-shrinkvalue - default 1
ordervalue - default 1

display


.container {
    display: flex | inline-flex;
  }

flexbox-1

flex-direction


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

flexbox-2

flex-wrap


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

flexbox-3

justify-content


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

flexbox-4
flexbox-5

align-content


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

align-item


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

flexbox-6

align-self


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

flex-grow


  .item {
    flex-grow: 2; /* default 0 */
  }
  
flexbox-8

flex-shrink


  .item {
    flex-shrink: 4; /* default 1 */
  }
  
flexbox-9

order


  .item {
    order:2; /* default 1 */
  }
  
flexbox-10
facebook-logo
twitter-logo
instagram-logo

2020 © All rights reserved.