What is a Flexbox?

1

2

main size

cross size

main start

main end

cross start

cross end

main axis

cross axis

.container {
  display: flex; /* or inline-flex */
}

flex

inline-flex

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

row*

row-reverse

column

column-reverse

* default

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

nowrap*

wrap

wrap-reverse

* default

.container{
   flex-flow: <‘flex-direction’> || <‘flex-wrap’>
}

Combination of flex-direction and flex-wrap.

.container{
   flex-flow: row nowrap;
}

By default:

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

flex-start*

flex-end

center

space-between

space-around

* default

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

flex-start

flex-end

center

baseline

stretch*

*  default

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

flex-start

flex-end

center

space-between

space-around

stretch*

* default

.item {
  order: <integer>;
}

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

* Negative values are invalid

Growing index if space available

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

* Negative values are invalid

Shrinking index if lack of space

Example ...

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

    <div class="flex-container">
      <div class="flex-item basis-auto">auto</div>  
      <div class="flex-item basis-0">0</div>
      <div class="flex-item basis-auto">auto</div>  
    </div>

HTML:

CSS:

.flex-container {  
    display: inline-flex;
    width: 300px;
}
.flex-item {
    width: 50px;
    flex-grow: 1;
    flex-shrink: 1;
}
.basis-auto {
    flex-basis: auto;   
}
.basis-0 {
    flex-basis: 0;
}

Result:

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

Combination of flex-grow, flex-shrink and flex-basis.

.item{
   flex: 0 1 auto;
}

By default:

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

flex-start

stretch

center

flex-end

baseline

Since the specification has suffered from several modifications over the time, this had as a result the creation of several versions:  

This problem can be solved somehow by the use of Autoprefixer or creating dedicated mixins.

• Pros

• Cons