Pure CSS3 Flexbox Tutorial

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 works on any website! 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 styling.

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 extra div's with no classes using CSS 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. The rest of this CSS3 code is laid out in simple format with information for each class within the code. So now your all set! Style Away…

Click Here to View Our Flexbox HTML Demo!

or

View the Live Wikidot Syntax Demo below:

Pure

CSS3

Flexbox

Try

It

Out!

If you are viewing these demo's in Internet Explorer, Mozilla Firefox, or Opera, you will see that this clearly does not work correctly! That's why we said earlier in this post to switch to Google Chrome or Apple Safari to view the Pure CSS3 Flexbox.

21 Feb 2011 05:43

rating: +1+x

Add a New Comment
2015-09-10_1852.png

About Us

Here at the Icon Deposit, we give you the opportunity to post your icons, designs, codes, and screenshots to promote your work and gain new clients. We feature hundreds of free icons, icon sets, UI/UX design, illustrator graphics, vector art, code tutorials for CSS, CSS3, JQuery, photoshop tutorials and tons more. If you would like a custom design or website built, Contact Us.

Popular Posts

Copyright © 2011-2019 Icon Deposit - All rights Reserved