[태그:] flex

flex를 사용한 탭 만들기에서 간단한 탭 만드는 방법을 알아봤습니다. 그런데 스마트폰에서 볼때는 의도한 데로 표시되지 않는 것을 볼 수 있습니다. 이는 모바일 브라우저에서 인식하는 스타일이 다르기 때문으로, 다음과 같이 -webkit- 접두어를 추가해 주면 됩니다.

.container{
    display: -webkit-flex;/* for mobile */
    display: flex;
}
.container .child{
    -webkit-flex:auto;/* for mobile */
    flex:auto;
}

이제 스마트폰에서도 대부분의 경우에는 원하는 결과를 얻을 수 있습니다. 그러나 우리의 기대를 저버리지 않는 갤레기 일부 갤럭시 시리즈에서는 제대로 동작하지 않습니다. 이런 일부 스마트폰을 위해서는 다음과 같이 두 줄의 코드를 더 추가해야 합니다.

.container{
    display:-webkit-box;/* for galaxy */
    display: -webkit-flex;/* for mobile */
    display: flex;
}
.container .child{
    -webkit-flex:auto;/* for mobile */
    flex:auto;
    width:33.3%;/* for galaxy */
}

여기서 병맛인건, width값은 탭의 갯수에 따라서 1/n 값으로 적용해야 한다는 점입니다. 예를 들어 2개이면 50%, 4개이면 25% 처럼 말이죠.

그래서 대안으로 자바스크립트를 사용해서 리스트의 갯수에 따라서 width 값을 입력해 주는 스크립트를 사용할 수 있습니다.

$(function(){
    var lis = $("ul.flex_container > li");
    lis.width((100 / lis.length) + "%");
});

이제 모바일에서도 원하는 결과를 얻을 수 있습니다.

• 111
• 222
• 333