flex layout 사용시, flex content의 초기 너비 설정 속성인 flex-basis는
IE에서 제대로 적용하려면 세심하게 조정해야 합니다.
Chrome, Firefox, Edge 등 타 브라우저의 flex basis의 너비 값 계산은 큰 문제 없이 참 잘되요.
일단, 이해하기 쉽도록 예를 먼저 들어보겠습니다!
만약 IE 브라우저에서 content의 너비가 100px 일 경우, flex-basis:100px;을 지정했다면
padding, border, margin의 값을 제외한 오직 content의 너비여야 합니다.
padding이 양옆으로 10px씩 들어가 있으면 IE 브라우저는 너비를 120px로 인식해요.
잠깐! 그럼 box-sizing의 border-box 주면 되는거 아니에요? 라고 생각하실 수 있어요.
저도 똑같은 생각을 했었어요. (님맴제맴)
그러나 애석하게도 IE에선 box-sizing:border-box;가 들어가 있어도 아무 소용이 없어요.
지정을 해도 무시되고 그냥 자기 마음대로 content-box로 인식이 됩니다. (흡,,)
어어? 잠깐, 여기서 calc 속성을 사용해서 너비값 이 외의 것들을 빼주면 되는거 아니야? 라고 생각하신분 ~?
허허,, css에 능숙하신 분이시군요. 잘 생각 하셨어요.
저도 calc라는 속성을 사용해서 flex:0 0 calc(50% - 20px); 이렇게 적용하면 말끔하게 해결 될 거라고 생각했어요.
그러나,,, 여기서도 IE는 calc도 어림 없지! 하며 어깃장을 놓습니다.
그래서 저는 열심히 구글링을 해보았습니다.
그 결과,
-ms-flex-preferred-size: calc(50% - 20px);
요 생소한 속성을 적용하면 쨘! 하고 해결이 되어요.
사용 예는 아래와 같습니다.
.box{
flex:0 0 calc(50% - 20px);
-ms-flex-preferred-size: calc(50% - 20px);
}
원하는 박스 너비 값에 padding, border, margin 값을 제거하고 사용하고
해당 속성을 꼭 flex or flex-basis 아랫줄에 적용해야 합니다.
개인적으로, 제 경우엔 유동적인 너비값을 가지는 박스를 만드는 경우에 많이 사용합니다.
저와 같이 어려움에 겪는 분들에게 많은 도움이 되길 바라며 이만 물러나겠습니다.
뿅★