flex를 사용한 탭 만들기

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

1
2
.container{display:flex;}
.container .child{flex:auto;box-shadow:0 0 1px 1px #69f;}
1
2
3
4
<div class="container">
    <div class="child">111</div>
    <div class="child">222</div>
</div>

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

111
222

.

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

  • 111
  • 222
  • 111
  • 222
  • 333
  • 111
  • 222
  • 333
  • 444

1
2
3
4
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;}
<ul class="flex_container">
    <li><span>111</span></li>
    <li><span>222</span></li>
    <li><span>333</span></li>
</ul>
1
2
3
4
5
6
7
8
$(function(){
    $("ul.flex_container > li").bind("click", flexContainerClick);
});
function flexContainerClick(){
    var me = $(this);
    me.siblings().removeClass("on");
    me.addClass("on");
}

참 쉽죠잉?

One thought on “flex를 사용한 탭 만들기”

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다