Flexibility

Flexibility Plugin

Web UI 개발하다보면 CSS3 Flex 속성이 얼마나 유용한지 체감할 수 밖에 없다. 세로 중앙 정렬같은 경우나, 컨텐츠 자동 상/하/좌/우 중앙 정렬 처리할 때 일반적인 속성으로는 처리하기 힘들기 때문이다. 여러가지 편법을 사용해야 한다. 특히 사이즈가 컨텐츠에 따라 유동적일 경우 여러가지 기묘한 방법을 써야만한다. flex 박스 content-adjust 와 align-items 속성만 지정하면 간단한 것을.... 그렇다고 고작 그러한 처리를 위해 스크립트를 짜서 따로 영역 계산해주기도 번거롭고..... 무엇보다 볼품없다.

그렇지만 아직도 IE10 이하 버전 사용자가 많은 상태에서 Flex 속성을 고집하면 아무래도 좀 아쉬운 감이 있다 ( 혹은 그래선 안된다 ). 그러다가 오늘 발견한 유용한 플러그인이 하나 있는데....

Flexibility !!

https://github.com/jonathantneal/flexibility 에서 사용방법과 리소스를 다운받을 수 있으며, 정말 간단하게 IE 8, 9 에서도 flex 효과를 그대로 구현할 수 있다. 얼마나 편할까??

1. 스크립트 로딩
   
   

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

   
   
2. CSS 
   
   

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

이것만 하면 IE 8 과 IE 9 에서 훌륭한 flex 속성을 사용해서 레이아웃을 유지시킬 수 있다. 너무너무 좋다. 2년 전에 나왔는데 이제 알았다니, 리서치를 생활화해야하는 이유다. Flex 박스 사용 안하면 중앙 정렬은 참 번거롭다.

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

이런 짓을 해야된다. 이건 다행히 컨테이너 크기가 Fix 되어 있을 경우고... 그렇지 않은 경우에는 

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

이런 짓을 해야 된다.... 이건 뭐 그냥 아무 생각없이 보면 "저 속성 왜 썼어??" 라는 생각만들 뿐이다. 말 그대로 트릭이다...

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

정말 훌륭하다... 가독성과 의미 그대로의 레이아웃 구현... 너무 좋다... Flexibility 덕분에 한층 CSS 노가다가 편해졌다...

만들어주신 분들 감사합니다.

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.