Pure CSS3 Flexbox Tutorial

To start off, we will be showing a tutorial/demonstration an easier and much different version of the CSS3 Flexbox by isotoma.com. This one also looks fantastic! But to be very clear, this will only work correctly if you have the latest google chrome browser or the latest version of the Apple Safari Browser, so make sure you are up to date with today's latest internet browsers before we continue this demonstration/tutorial. Browsers such as Internet Explorer, Mozilla Firefox, and sometimes Opera will mostly cause problems or wont display some important content while you are viewing the new website's of today, even on our website it is imperative that you are viewing this site in Google Chrome.

Ok, so now that we have that out of the way, we can start this tutorial. To use this type of flexbox, we would appreciate a link back to this page! This can work both with your wikidot site, wordpress site, or any site that uses CSS code! We will begin with the HTML and or Wikidot syntax markup used below.

The HTML:

<div class="flexbox">
<div>
<p>Pure</p>
</div>
<div>
<p>CSS3</p>
</div>
<div>
<p>Flexbox</p>
</div>
<div>
<p>Try</p>
</div>
<div>
<p>It</p>
</div>
<div>
<p>Out!</p>
</div>
</div>

The class of this div is called "flexbox". The unique thing about this one is that it only needs one class! Make sure you copy and paste this entire code if you are using html. Later in this post we will show you how to style each div with the CSS3 markup.

Here's the Wikidot Syntax:

[[div class="flexbox"]]
[[div]]
Pure
[[/div]]
[[div]]
CSS3
[[/div]]
[[div]]
Flexbox
[[/div]]
[[div]]
Try
[[/div]]
[[div]]
It
[[/div]]
[[div]]
Out!
[[/div]]
[[/div]]

This is another unique code especially for Wikidot, you only style the flexbox with CSS3 coding.

This is the CSS3 coding that we used for this flexbox…

Copy and paste this code in the bottom of your CSS code:

/* Start The Icon Deposit Flexbox */
.flexbox {
/* This acts as the "box-container" you may style this as well */
    color: #585858 !important;
    width: auto;
    height: auto;
    font-size: 20px;
    border: none;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    display: -moz-box;
    -moz-box-orient: horizontal;
    display: box;
    box-orient: horizontal;
    margin: 0 auto;
    position: relative;
    padding: 3px 0 10px 10px;
    -webkit-box-flex: 200; /* Keep this */
    -moz-box-flex: 200; /* Keep this */
    box-flex: 200; /* Keep this */
    margin-left: 0;
    margin-right: 15px;
    text-shadow: 1px 1px 1px rgba(240,240,240,0.7);
 
/* flexbox setup */
    display: box;
    box-orient: horizontal;
    box-align: stretch;
}
 
/* This is the box styling before it is hovered over (normal state) */
.flexbox > div {
    -webkit-box-flex: 200; /* Keep this */
    -moz-box-flex: 200; /* Keep this */
    box-flex: 200; /* Keep this */
    box-align: stretch;
    -moz-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    -webkit-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
    -webkit-border-radius: 2px !important;
    -moz-border-radius: 2px !important
    border-radius: 2px !important;
    margin-left: 0px;
    padding: 10px 70px 10px 5px;
    margin-right: -5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.28);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.28);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.28);
    width: 50px;
    margin-top: 10px;
    margin-bottom: 10px;
}
 
/* Box coloring (Each box starts left to right - colors for each box should go here */
/* You may also add or remove boxes for your own effects and styling */
.flexbox > div:nth-child(1){ background : #21c1d1; } /* <----1st box color */
.flexbox > div:nth-child(2){ background : #71db00; } /* <----2nd box color */
.flexbox > div:nth-child(3){ background : #fbdb15; } /* <----3rd box color */
.flexbox > div:nth-child(4){ background : #21c1d1; } /* <----4th box color */
.flexbox > div:nth-child(5){ background : #71db00; } /* <----5th box color */
.flexbox > div:nth-child(6){ background : #fbdb15; } /* <----6th box color */
 
/* This styles all of the boxes when you hover over them */
.flexbox > div:hover {
      width: 250px;
    box-shadow: 0 0 10px rgba(0,0,0,0.28);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.28);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.28);
}

In this CSS code the .flexbox > div:nth-child(…){ background classes will be the color stlye for each box. Other than that, you may use our full CSS code above for a template to branch off of it. So your all set! Style Away…

Click Here to View Our Flexbox Demo!

or

View the Live Demo below:

Pure

CSS3

Flexbox

Try

It

Out!

Copyright © 2011-2015 Icon Deposit - All rights Reserved