태그 보관물: flex

HTML/CSS

flex를 사용한 탭 만들기 2

댓글 남기기

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

1
2
3
4
5
6
7
8

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

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

1
2
3
4
5
6
7
8
9
10

.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 값을 입력해 주는 스크립트를 사용할 수 있습니다.

1
2
3
4

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

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

  • 111
  • 222
  • 333

HTML/CSS

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

.
flex를 사용한 탭 만들기 더보기 →