Create a simple markup represents the relation parent (ul element with the class nav) and child (li element) and displays the nav button.
<!DOCTYPE html>Previously, CSS3 add a display to visualize clearly what we want to learn this time.
<html>
<head>
<title>Flexbox</title>
</head>
<body>
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>
</body>
</html>
/* // Style overall ------------------------*/And the results are as we expected, some rectangle that runs vertically down to form a list.
* {
box-sizing: border-box;
}
body {
margin: 40px 0;
background: #203542;
font-size: 1.3em;
font-family: helvetica,sans-serif;
}
.nav {
margin: 0 auto;
padding: 20px;
width: 80%;
border: 2px solid #1d2e3a;
border-radius: 10px;
background: #156596;
list-style-type: none;
}
li {
margin: 10px;
border-radius: 10px;
background: #FFB70F;
color: #858585;
color: #203542;
}
.nav a {
display: block;
padding: 15px;
color: inherit;
text-decoration: none;
font-weight:bold;
}
The result :
+Layout+Basic+CSS+Tutorial+1.png)
After that, we add flexbox properties by adding;
/* // STATE Flexbox ------------------------*/To avoid cross browser issues do not forget to add the prefix-webkit,-moz,-ms and-o
.nav {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: space-between;
-webkit-flex-wrap: wrap;
}
The result :
+Layout+Basic+CSS+Tutorial+2.png)
You see the difference ?
Flexbox Modules, making the class nav flex container with elements as flex items. Layout was changed to horizontal spread due to the selected row direction (and indeed this value is the default value direction). And note, it's interesting that when we viewport minimize large, flex items will adjust to the current proportionally. We do not need to bother to set up a large space in between the flex items.