The Flexbox Playground allows you to play around with all the CSS properties for flexbox.

What Is Flexbox?

CSS flexbox is a new CSS layout module, the other CSS layout modules are:

• block layout
• inline layout
• table layout
• positioned layout
• Grid layout (added with flexbox in CSS3)

The flexbox layout is used to arrange the children of a container in either rows or columns, and can flex their sizes to fill the space in the container or shrink to avoid overlap.

The Flexbox playground allows you to modify the flexbox settings to display the children items in anyway you want.

The container properties you can change are:

• Flex direction
• Flex wrap
• Justify content
• Align items
• Align content

The children of a container can be modified to change if they are displayed in a row, columns, rows reversed or columns reversed by using the flow-direction property.

Flex wrap allows you to define if you want the child items to wrap onto a new row in the container.

Justify content will let you define how the items are arranged on the horizontal.

Align items items allows you to align the items on the vertical of the container.

Align content is similar to justify content but will define how items are arranged vertically.

How To Use Flexbox Playground

The flexbox playground starts off with the HTML of a container box with 3 child items inside the container, there are settings on the left side of the page which allows you to customise all the flexbox container properties.

The next tab has settings that allows you to customise the child items inside the flexbox container.

At the top of the settings you can customise the height and width of all the child boxes. If you want to add more child items to the container there is a button at the top of the settings area. When a child item is added to the container it is numbered, each of the child items have their own settings allowing you to change the order, flex-grow, flex-shrink and align-self properties.

Once you have finished changing the settings of the flexbox you can then grab all the code used to recreate the demo flexbox layout you have created.

The HTML

<div class="flexbox-container">
<div class="flexbox-child flexbox-child-item-1">1</div>
<div class="flexbox-child flexbox-child-item-2">2</div>
<div class="flexbox-child flexbox-child-item-3">3</div>
<div class="flexbox-child flexbox-child-item-4">4</div>
<div class="flexbox-child flexbox-child-item-5">5</div>
</div>

The CSS

.flexbox-container{
height: 500px;
width: 600px;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: row;
-webkit-flex-direction: row;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
justify-content: flex-start;
-webkit-justify-content: flex-start;
align-items: flex-start;
-webkit-align-items: flex-start;
align-content: flex-start;
}

.flexbox-child{
height: 100px;
width: 20%;
background-color: #64b9e3;
margin: 15px;
padding: 10px;
color: #FFF;
font-size: 120%;
text-align: center;
}

.flexbox-child-item-1{
order: 0;
-webkit-order: 0;
flex-grow: 0;
-webkit-flex-grow: 0;
flex-shrink: 0;
-webkit-flex-shrink: 0;
align-self: auto;
-webkit-align-self: auto;
}

.flexbox-child-item-2{
order: 0;
-webkit-order: 0;
flex-grow: 0;
-webkit-flex-grow: 0;
flex-shrink: 0;
-webkit-flex-shrink: 0;
align-self: auto;
-webkit-align-self: auto;
}

.flexbox-child-item-3{
order: 0;
-webkit-order: 0;
flex-grow: 0;
-webkit-flex-grow: 0;
flex-shrink: 0;
-webkit-flex-shrink: 0;
align-self: auto;
-webkit-align-self: auto;
}

.flexbox-child-item-4{
order: 0;
-webkit-order: 0;
flex-grow: 0;
-webkit-flex-grow: 0;
flex-shrink: 0;
-webkit-flex-shrink: 0;
align-self: auto;
-webkit-align-self: auto;
}

.flexbox-child-item-5{
order: 0;
-webkit-order: 0;
flex-grow: 2;
-webkit-flex-grow: 2;
flex-shrink: 0;
-webkit-flex-shrink: 0;
align-self: auto;
-webkit-align-self: auto;
}

Use Flexbox Playground

Try out the Flexbox playground now.

Need help with your website? Hire a coveloping freelancer - fill out our quick form with your requirements and we'll get back to you with an estimate and availabilty. Find out more...