<body>
<div class="Flexbox"> // flex container에 해당하는 class
<div class="Flexbox-cell">// flex items에 해당하는 class
......
</div>
</div>
</body>
<!--한 section에서 나누어진 두문단으로 써야 하면 <div> tag로 block을 하나 만들어 주고 custom 해주세요.
플렉스박스에서는 동일한 크기와 간격이 Flexbox-cell에서 정의되어 있어 Flexbox-cell div만 추가해주면 동일크기와 간격으로 자동 구분 됩니다.
-->
<div class="Flexbox">
<div class="Flexbox-cell">
<div>1/2의 첫번째</div>
</div>
<div class="Flexbox-cell">
<div>1/2의 두번째</div>
</div>
</div>
<div class="Flexbox Flexbox-rowreverse">
<div class="Flexbox-cell">
<div>1/3의 첫번째</div>
</div>
<div class="Flexbox-cell">
<div>1/3의 두번째</div>
</div>
<div class="Flexbox-cell">
<div>1/3의 세번째</div>
</div>
</div>
<!--Flexbox direction의 기본은 row가 기본입니다.
따라서 세로방향의 레이아웃을 사용할때는 class로 Flexbox-column을 Flexbox class 에 추가해주세요.
Flexbox-row / Flexbox-rowreverse / Flexbox-column / Flexbox-columnreverse
세로방향의 레이아웃을 사용할때는 Flexbox-cell div를 만들어 줄 필요가 없습니다.
-->
<div class="Flexbox Flexbox-column">
<div>1/2의 첫번째</div>
<div>1/2의 두번째</div>
</div>
<div class="Flexbox Flexbox-columnreverse">
<div>1/3의 첫번째</div>
<div>1/3의 두번째</div>
<div>1/3의 세번째</div>
</div>
26, Jong-ro, Jongno-gu, Seoul, 03188, Republic of Korea
Copyright © 2018 SK Holdings C&C. All rights reserved.