Build with Flexbox

Flexbox is a layout system optimized for building user interfaces. Use this interactive reference tool to recall flexbox properties and experiment with layouts.

Platform

Web React Native

Container

Show Code Reset

flex-direction	row column row-reverse column-reverse
flex-wrap	nowrap wrap wrap-reverse
justify-content	flex-start flex-end center space-between space-around
align-items	flex-start flex-end center baseline stretch
align-content	flex-start flex-end center space-between space-around stretch

Children

Reset

+-Base 1 2 3

flex-grow
flex-shrink
flex-basis
flex	0 1 auto
width
height
padding
margin