Flexibility

Flexibility Plugin

You are going to realize soon how good CSS3's flex attribute is when you develop a web UI. Vertical or automatic centering will give you some hard time when you just can't use the CSS3 property. You have to come up with some workarounds to do that, especially when the container doesn't have a fixed size. If you could use the flex, it can be done with just 'content-adjust' and 'align-items'. It's as simple as that! You don't want to tweak some script codes to calculate the dimension because... that literally... sucks.

But there are a lot of users who are still using IE below 10 ver. Using the flex attributes ignoring those people will probably bother you much, and you shouldn't IMHO. Anyway... One thing right to another... I accidentally bumped into this useful plugin today and the name is....

Flexibility !!

You can find the resources and documentation on https://github.com/jonathantneal/flexibility and you can fully benefit from the powerful flex functionalities even in IE 8 and IE 9. How simple would that be ??

1. Loading the script
   
   

   <script src="flexibility.js"></script>

   
   

2. Declaring CSS like this 
   
   

   .container {
       -js-display: flex;
       display: flex;
   }

Will do. You can keep the layout intact in the old IE browsers. This is quite a legit plugin ! It was released 2 years ago and it's a shame that I got to know this plugin today, I've got to keep my eye on new plugins and search more often I guess. Let's see how messy your CSS will be without the flex !

.centering {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: (- height half ) 0 0 ( - width laf );
}

This is how you can achieve the vertical & horizontal centered layout. This will only work if the container has a fixed width and height. Otherwise...

.centering {
    position: absolute;
    top: 50%;
left: 50%;
transform: translate(-50% -50%);
}

You have to do something like this. If you don't know how this code works, you would think that "what the hell transform and translate are for?" Yeah... It's just a smart trick. The attributes weren't born for centering an element !!

.centering {
    content-adjust: center;
    align-items: center;
}

Look how simple it is... it's very readable and literally ' center '. It just made my CSS life easier, much much easier !!

I want to say thanks a million to those guys who made this plugin.