Flexbox CSS3 Basic Tutorial

Have you read about the basic concepts of flexbox?

If not, you can find out what flexbox is in various sources. Google help is highly recommended. You can also read here for an explanation of the flexbox concept in general.
For the first flexbox tutorial we will create a navigation bar using flexbox.

Create simple markup representing parent (ul elements with nav class) and child (li elements) relations and display nav buttons.


First, add a little css3 view to clearly visualize what we want to learn this time.

/* // Style overalls ————————*/

  • {
    box-sizing: border-box;
    body {
    margins: 40px 0;
    backgrounds: #203542;
    font-size: 1.3em;
    font-family: helvetica,sans-serif;
    .nav {
    margins: 0 auto;
    padding: 20px;
    width: 80%;
    border: 2px solid #1d2e3a;
    border-radius: 10px;
    backgrounds: #156596;
    list-style-type: none;

li {
margins: 10px;
border-radius: 10px;
background: #FFB70F;
color: #858585;
colors: #203542;
.nav a {
display: block;
padding: 15px;
color: inherit;
text-decoration: none;
and the result is as we expected, several rectangles arranged vertically downwards to form a list.


You can also see the results here in Flexbox Basic which I wrote with an account (@arwasil) on CodePen.

After that, we add flexbox properties by adding ;

/* // STATE Flexbox ————————*/

.nav {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-flex-wrap: wrap;
To avoid cross browser problems don’t forget to add -webkit , -moz, -ms and -o . prefixes

See the difference?
You can see at the following address
Flexbox Modules creates a nav class flex container with elements as flex items. The layout also changes to spread horizontally due to the selected direction row (and indeed this value is the default direction value). And notice, the interesting thing is that when we enlarge the viewport, the flex items will adjust to the proportional moment. We don’t need to bother adjusting the amount of space between flex items.