flex를 사용한 탭 만들기

폭이 가변으로 조종되는 메뉴나 탭을 만들 때 flex를 사용해면 쉽게 처리가 가능합니다.
탭을 포함하는 콘테이너에 display:flex를 적용하고, 콘테이너에 들어가는 요소는 flex:auto를 주면… 끝!!! HTML과 CSS 코드는 다음과 같습니다.
(box-shadow는 영역을 눈으로 확인하기 위해 사용하였고, 실제 코드상 필요없는 부분입니다.)

.container{display:flex;}
.container .child{flex:auto;box-shadow:0 0 1px 1px #69f;}

    
111
    
222

그러면 다음과 같은 결과를 얻을 수 있죠.

.

여기에 테두리 및 배경색을 추가해주면 다음과 같이 간단히 탭을 구현할 수 있습니다.

• 111
• 222

• 111
• 222
• 333

• 111
• 222
• 333
• 444

ul.flex_container{display:flex;list-style:none;border-bottom:1px solid #69f;height:30px;}
ul.flex_container > li{flex:auto;text-align:center;line-height:30px;}
ul.flex_container > li span{display:block;height:29px;border:1px solid #fff;border-bottom:none;background-color:#fff;}
ul.flex_container > li.on span{border:1px solid #69f;border-bottom:none;background-color:#efefef;height:30px;}

    
111
    
222
    
333

$(function(){
    $("ul.flex_container > li").bind("click", flexContainerClick);
});
function flexContainerClick(){
    var me = $(this);
    me.siblings().removeClass("on");
    me.addClass("on");
}

참 쉽죠잉?