<div id="wrap">
<div class="flexArea ai-center">
<div class="flexItem">
<span>Item</span>
</div>
<div class="flexItem">
<span>Item</span>
</div>
</div>
<div class="flexArea ai-start">
<div class="flexItem">
<span>Item</span>
</div>
<div class="flexItem">
<span>Item</span>
</div>
</div>
<div class="flexArea ai-end">
<div class="flexItem">
<span>Item</span>
</div>
<div class="flexItem">
<span>Item</span>
</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;}
}
&.ai-center .flexItem{align-items: center;}
&.ai-start .flexItem{align-items: flex-start;}
&.ai-end .flexItem{align-items: flex-end;}
}
}
#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 .flexArea.ai-center .flexItem {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#wrap .flexArea.ai-start .flexItem {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
#wrap .flexArea.ai-end .flexItem {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
아래 주소를 복사하여 다른 곳에 붙여넣으세요.
모바일 환경에서는 코드 결과가 gif로 표시됩니다.
그래도 결과를 볼까요?
(제대로 된 결과를 보려면 노트북 또는 데스크탑에서 실행해주세요.)