Flexbox Playground

Flexbox is a one-dimensional layout model for building user interfaces. It offers space distribution between items and powerful alignment capabilities.

Flex Container Properties
Show Code
flex-direction:
row
column
row-reverse
column-reverse
justify-content:
flex-start
flex-end
center
space-between
space-around
space-evenly
align-items:
flex-start
flex-end
center
stretch
Flex Item #1
order:
flex:
width:
height:
margin-left:
margin-right:
text-align:
Flex Item #2
order:
flex:
width:
height:
margin-left:
margin-right:
text-align:
Flex Item #3
order:
flex:
width:
height:
margin-left:
margin-right:
text-align:
Logo
Avatar

Lisa

Hey, have to tried Flexbox? This is so much better than floats!

Avatar

David

Hey, I've never tried it yet.

Avatar

Lisa

It's a real layout model, you can forget about clearfix and other hacks.

This box is perfectly centered.