Layout Template : Flexbox Layout

Flexbox Layout - Flexbox UI Grid Layout

Flexbox(Flexible box)란?
  • 플렉스박스는 flex container 안에 flex items 가 있고 이 flex items의 크기를 유연하게 조절하는 것이 가장 큰 장점입니다.
  • 실제 마크업된 순서와 상관없이 별개로 각 items 모듈을 원하는 순서나 방향으로 쉽게 나타나게 할 수 있어 접근성에 제약을 받지 않습니다.
  • 기존에 float와 position을 사용해서만 할 수 있던 너비와 간격을 인접한 div와 동일하게 할 수 있고 수직정렬도 쉽게 제어할 수 있습니다.
  • 동일한 너비, 간격, 높이가 가능하여 반응형 제작 시 유용합니다.
  • flexbox의 layout에는 기본적으로 모바일에 대한 반응형이 적용되어있습니다.
  • UI Grid Layout 과 마찬가지로 기본 wrapper 가 되는 flex container에 해당하는 class 'Flexbox'를 먼저 선언해줍니다.
    										
    										<body>
    										    <div class="Flexbox"> // flex container에 해당하는 class
    										        <div class="Flexbox-cell">// flex items에 해당하는 class
    										......
    										        </div>
    										    </div>
    										</body>
    										
    									
  • flexbox에 대한 spex은 w3.org를 참고로 하였습니다. CSS Flexible Box Layout Module
  • Flexbox component 는 css3의 최신 스펙으로 적용 브라우져는 IE11, chrome등의 상위버전의 브라우져에서 사용가능합니다.
    flexbox 적용 가능 브라우져 확인
가로방향의 레이아웃의 정방향유형
1/2의 첫번째
1/2의 두번째
1/4의 첫번째
1/4의 두번째
1/4의 세번째
1/4의 네번째
가로방향의 레이아웃의 역방향유형
1/3의 첫번째
1/3의 두번째
1/3의 세번째
						
							<!--한 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>
세로방향의 레이아웃 정방향유형
1/2의 첫번째
1/2의 두번째
세로방향의 레이아웃의 역방향유형
1/3의 첫번째
1/3의 두번째
1/3의 세번째
						
							<!--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>
SK Holdings C&C

26, Jong-ro, Jongno-gu, Seoul, 03188, Republic of Korea
Copyright © 2018 SK Holdings C&C. All rights reserved.