<div id="wrap">
<div class="flexArea fe-shrink-d">
<div class="flexItem"></div>
</div>
<div class="flexArea fe-shrink">
<div class="flexItem"></div>
</div>
</div>
#wrap{padding: 50px; box-sizing: border-box;
.flexArea{display: flex;
.flexItem{display: flex; width: 200px; height: 200px; max-width: 200px; font-size: 16px; font-family: 'Noto Sans';
color: #fff; background-color: #000;
+.flexItem{margin-left: 10px;}
}
&.fe-shrink-d .flexItem{flex-shrink: 1; flex-basis: 1000px;}
&.fe-shrink .flexItem{flex-shrink: 0; flex-basis: 1000px;}
}
}
#wrap{
padding: 50px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#wrap .flexArea {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#wrap .flexArea .flexItem {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 200px;
height: 200px;
max-width: 200px;
font-size: 16px;
font-family: 'Noto Sans';
color: #fff;
background-color: #000;
}
#wrap .flexArea .flexItem + .flexItem {
margin-left: 10px;
}
#wrap .resultCont .container .flexArea.fe-shrink-d .flexItem {
-ms-flex-negative: 1;
flex-shrink: 1;
-ms-flex-preferred-size: 1000px;
flex-basis: 1000px;
}
#wrap .resultCont .container .flexArea.fe-shrink .flexItem {
-ms-flex-negative: 0;
flex-shrink: 0;
-ms-flex-preferred-size: 1000px;
flex-basis: 1000px;
}
아래 주소를 복사하여 다른 곳에 붙여넣으세요.
모바일 환경에서는 코드 결과가 gif로 표시됩니다.
그래도 결과를 볼까요?
(제대로 된 결과를 보려면 노트북 또는 데스크탑에서 실행해주세요.)