Layout Template : Flexbox Layout

Flexbox Layout - Variety Contents Layout

Variety Contents Layout에서 사용한 주요 CSS
  • Flexbox layout 내에 중첩 Flexbox layout을 넣고 싶을 경우에는 다른 특별한 Flexbox 관련 css가 필요 없이 중첩으로 마크업을 하면 됩니다.
  • 이웃한 Flexbox의 위치를 top/bottom/center 등으로 위치하고자 한다면 Flexbox-itemself-bottom css를 이용해서 align-self property를 적용해줍니다
    alopex ui 에서는 align-self property의 각 value 값에 따라 다음과 같이 적용하고 있습니다.
    • Flexbox-itemself-top : align-self: flex-start;
    • Flexbox-itemself-bottom : align-self: flex-end;
    • Flexbox-itemself-center : align-self: center;
    • Flexbox-itemself-stretch : align-self: stretch;
    • Flexbox-itemself-baseline : align-self: baseline;
  • align-self는 자신만의 위치를 지정할 수 있는 flexbox property 입니다.
다양한 컨텐츠의 조합 예시
Clean Street Campaign with people

This will provide some detailed information about the thumbnail board type. This will provide some detailed information about the thumbnail board type.

This will provide some detailed information about the thumbnail board type. This will provide some detailed information about the thumbnail board type.

Forest Protection Activities

This will provide some detailed information about the thumbnail board type. This will provide some detailed information about the thumbnail board type.

Forest Protection Activities

This will provide some detailed information about the thumbnail board type. This will provide some detailed information about the thumbnail board type.

Forest Protection Activities

This will provide some detailed information about the thumbnail board type. This will provide some detailed information about the thumbnail board type.

This will provide some detailed information about the thumbnail board type.

						
							<!-- Flexbox를 사용하면 단순한 css를 사용하여 다양한 컨텐츠를 쉽게 제작할 수 있습니다. -->
							<div class="Flexbox-cell Flexbox-itemself-bottom"> <!-- Flexbox의 각 cell 마다 align을 지정할 수 있습니다. -->
							    <div class="Flexbox">
							        <div class="Flexbox-cell">contents</div>
							    </div>
							</div>
						
					
수직정렬
수직정렬 중앙 맞추기
								
									<!-- class Flexbox-verti-middle 와 class Flexbox-middle-contents 를 사용하여 수직정렬을 맞출 수 있습니다. 부모의 height와 자식의 width는 사용자의 필요에 따라 수정하시면 됩니다. -->
									<div class="Flexbox-verti-middle">
									    <div class="Flexbox-middle-contents"> 내용 </div>
									</div>
								
							
수직정렬 : 여러개체를 각각 다른 위치로 놓을 경우
중앙정렬을 할 경우
item을 top에 위치할 경우
item을 bottom에 위치할 경우
input 100% 정렬
						
							<!--Textinput에 버튼이나 아이콘 정렬 시 100%를 맞추기가 기존에는 쉽지 않았습니다. 각 input마다 width 값을 정해줘야 했던 것을 Flexbox를 사용하게 되면 자동으로 정렬됩니다. -->
							<!--버튼이 input의 뒤에 있는 경우-->
							<div class="Flexbox">
							    <input class="Textinput Flexbox-cell">
							    <button class="Button">선택</button>
							</div>
							<!--아이콘이나 이미지가 앞에 있는 경우-->
							<div class="Flexbox">
							    <input class="Textinput Flexbox-cell">
							    <span class="Icon Search"></span>
							</div>
							<!--아이콘이나 이미지가 앞뒤로 있는 경우-->
							<div class="Flexbox">
							    <span class="Icon Envelope"></span>
							    <input class="Textinput Flexbox-cell">
							    <span class="Icon Search"></span>
							</div>
						
					
SK Holdings C&C

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