HTML
<div class="flexbox-example">
<ol class="boxes">
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ol>
</div>
<!----------------------------------------------
Flexbox Model
---------------------------------------------->
<figure class="main">
<figcaption class="main-axis">Main Axis</figcaption>
<figcaption class="main-start">Main Start</figcaption>
<figcaption class="main-end">Main End</figcaption>
</figure>
<figure class="cross">
<figcaption class="cross-axis">Cross Axis</figcaption>
<figcaption class="cross-start">Cross Start</figcaption>
<figcaption class="cross-end">Cross End</figcaption>
</figure>
CSS
html, body {
box-sizing: border-box;
width: 100%;
height: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
.flexbox-example {
height: 100%;
padding: 40px;
position: relative;
z-index: 3;
}
.boxes {
counter-reset: item;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.boxes .box {
background-color: #fff;
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #E8E8E8 100%);
background-image: linear-gradient(to bottom, #FFFFFF 0%, #E8E8E8 100%);
box-shadow: 2px 0px 20px rgba(0, 0, 0, 0.5);
color: #333;
margin: 5px;
padding: 40px 20px;
text-align: center;
font-size: 40px;
}
.boxes .box:before {
content: counters(item,".") " ";
counter-increment: item;
}
.main:before, .main:after {
height: 24px;
margin-top: -14px;
top: 50%;
width: 2px;
}
.main:before {
left: 0;
}
.main:after {
right: 0;
}
.boxes {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
/*===========================*\
| |
| DEMO CSS |
| |
\*===========================*/
figure {
height: 0;
font-size: 10px;
margin: 10px;
text-transform: uppercase;
text-align: center;
position: absolute;
}
figure:before, figure:after {
background-color: #c9c9c9;
content: "";
display: block;
position: absolute;
}
figure [class*="axis"] {
display: inline-block;
position: relative;
}
figure figcaption {
position: absolute;
}
.main {
border-color: #c9c9c9;
border-top-width: 2px;
border-top-style: dashed;
color: #D8000D;
height: 2px;
margin-top: -2px;
top: 50%;
right: 0;
left: 0;
z-index: 2;
}
.main figcaption {
background-color: #c9c9c9;
padding-left: 6px;
padding-right: 6px;
top: -5px;
}
.main-start {
left: 10px;
}
.main-end {
right: 10px;
}
.cross {
border-right-width: 2px;
border-right-style: dashed;
border-color: #c9c9c9;
color: #fff;
height: auto;
margin-left: -1px;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
-webkit-writing-mode: tb-rl;
-ms-writing-mode: tb-rl;
writing-mode: tb-rl;
z-index: 1;
}
.cross:before, .cross:after {
width: 24px;
margin-left: -10px;
left: 50%;
height: 2px;
}
.cross:before {
top: 0;
}
.cross:after {
bottom: 0;
}
.cross figcaption {
background-color: #D8000D;
right: -6px;
padding-top: 6px;
padding-bottom: 6px;
}
.cross-axis {
top: -50px;
}
.cross-start {
top: 10px;
}
.cross-end {
bottom: 10px;
}
