flexbox in 5 minutes

tour

do it!

control panel

new item

fixed flexible

lorem?

delete all resize box

container properties flex-direction: flex-wrap: justify-content: align-items: align-content:


                    .flex-container {
  display: flex;
  flex-direction: ;
  flex-wrap: ;
  justify-content: ;
  align-content: ;
  align-items: ;
}


    .flex-items-default {
  width: null;
  height: null;
  flex-grow: null;
  flex-shrink: null;
  flex-basis: null;
}

What can you do here? Take a step-by-step tour through the main properties of flexbox, including a few demos Play to your heart's content, changing properties of the flex container and individual flex items Copy and paste live code samples from whatever you create