CSS Flexbox Tester

Instruction Explanation Video

© Vladimir Jovanović :: DobarBREND 2022

flex-direction:

flex-wrap:

justify-content:

align-items:

align-content:

1

margin:
border:
padding:

2

margin:
border:
padding:

3

margin:
border:
padding:

4

margin:
border:
padding:

5

margin:
border:
padding:

6

margin:
border:
padding:

7

margin:
border:
padding:

8

margin:
border:
padding:

9

margin:
border:
padding:

10

margin:
border:
padding:

11

margin:
border:
padding:

12

margin:
border:
padding:

Introduction

This is the "Flexbox Tester" app that helps you understand how the flex properties work. The flex container becomes flexible by setting the display property to flex. The flex container properties are shown in the app's header with all possible values for each of them. If you want to get accustomed to these traits that make it easier to design a flexible responsive layout structure without using float or positioning, try different possibilities.

Share a link to this app:

The instructions for starting using this app:

Enter values for the margin, border, and padding attribute, for at least two HTML elements in every row.
Change these values to make bigger differences between elements to see what is happening.
Click the "Explanation" link in the main navigation bar to open the infographic as guidance.
Set one by one value for each flex container property in the main menu.
To reset the flex container property select a blank option in the drop-down menu of that property.
Use two or more flex properties at the same time (make HTML elements smaller than screen size to see effects).
Click on the F12 key to open developer tools in your browser, and click Ctrl-Shift-M to see flex in action on screens with different sizes.
Use F5 key to refresh page if you want to start all over again.