Flexbox

Flexbox

Playground

Playground

1
2
3

Boxes: count

Boxes: min-width

Boxes: min-height

Flex view size fix

Boxes number

Flex-grow:

Box number

Grow number

Flex-shrink:

Shrink number

Flex-basis:

Basis number

Basis unit

null
  • null
  • 0
  • px
  • %
  • rem
  • em
  • auto
  • content
.flex-view {
  • display: flex;
}

flex-direction: row;

Add flex-direction: row;

Add flex-direction: column;

Add flex-direction: row-reverse;

Add flex-direction: column-reverse;

flex-wrap: nowrap;

Add flex-wrap: nowrap;

Add flex-wrap: wrap;

align-content: stretch;

Add align-content: center;

Add align-content: flex-start;

Add align-content: flex-end;

Add align-content: space-around;

Add align-content: space-between;

Add align-content: stretch;

justify-content: flex-start;

Add justify-content: center;

Add justify-content: flex-start;

Add justify-content: flex-end;

Add justify-content: space-between;

Add justify-content: space-around;

Add justify-content: space-evenly;

align-items: stretch;

Add align-items: center;

Add align-items: flex-start;

Add align-items: flex-end;

Add align-items: stretch;

Add align-items: baseline;

align-self

Add align-self: center;

Add align-self: self-start;

Add align-self: self-end;

Add align-self: stretch;

Add align-self: baseline;