본문바로가기

Theme

Flexbox

Flexbox component는 css3의 최신 스펙으로 적용 브라우저는 IE11, chrome등의 상위버전의 브라우저에서 사용가능합니다.

flexbox 적용 가능 브라우저 확인

Basic

Flexbox(Flexible box) layout은 IE11, chrome, firefox, safari, opera에서 동작되며 webkit 엔진의 브라우저에서의 하위 버전에서는 verdor prefix를 사용하여 적용해주어야 합니다.

  • 플렉스박스는 flex container 안에 flex items 가 있고 이 flex items의 크기를 유연하게 조절하는 것이 가장 큰 장점입니다.
  • 실제 마크업 된 순서와 상관없이 별개로 각 items 모듈을 원하는 순서나 방향으로 쉽게 나타나게 할 수 있어 접근성에 제약을 받지 않습니다.
  • 기존에 float와 position을 사용해서만 할 수 있던 너비와 간격을 인접한 div와 동일하게 할 수 있고 수직 정렬도 쉽게 제어할 수 있습니다.
  • 동일한 너비, 간격, 높이가 가능하여 반응형 제작 시 유용합니다.
  • UI Grid Layout 과 마찬가지로 기본 wrapper 가 되는 flex container에 해당하는 class 'Flexbox'를 먼저 선언해줍니다.
  • flexbox에 대한 spex은 w3.org를 참고로 하였습니다. CSS Flexible Box Layout Module
Examples

가로방향 레이아웃의 정방향 유형

  • 한 section에서 나누어진 두 문단으로 써야 하면 div tag로 block을 하나 만들어 주고 custom 해주세요.
  • 플렉스박스에서는 동일한 크기와 간격이 Flexbox-cell에서 정의되어 있어 Flexbox-cell div만 추가해주면 동일 크기와 간격으로 자동 구분됩니다.
1/2의 첫번째
1/2의 두번째
1/4의 첫번째
1/4의 두번째
1/4의 세번째
1/4의 네번째
<div class="Flexbox">
	<div class="Flexbox-cell">1/2의 첫번째</div>
	<div class="Flexbox-cell">1/2의 두번째</div>
</div>
<div class="Flexbox">
	<div class="Flexbox-cell">1/4의 첫번째</div>
	<div class="Flexbox-cell">1/4의 두번째</div>
	<div class="Flexbox-cell">1/4의 세번째</div>
	<div class="Flexbox-cell">1/4의 네번째</div>
</div>

가로방향 레이아웃의 역방향유형

1/3의 첫번째
1/3의 두번째
1/3의 세번째
<div class="Flexbox Flexbox-rowreverse">
	<div class="Flexbox-cell">1/3의 첫번째</div>
	<div class="Flexbox-cell">1/3의 두번째</div>
	<div class="Flexbox-cell">1/3의 세번째</div>
</div>

세로방향 레이아웃

  • Flexbox direction의 기본은 row가 기본입니다.
  • 따라서 세로방향의 레이아웃을 사용할 때는 class로 Flexbox-column을 Flexbox class에 추가해주세요.
  • Flexbox-row / Flexbox-rowreverse / Flexbox-column / Flexbox-columnreverse
  • 세로방향의 레이아웃을 사용할 때는 Flexbox-cell div를 만들어 줄 필요가 없습니다.

세로방향 레이아웃의 정방향유형

1/2의 첫번째
1/2의 두번째

세로방향 레이아웃의 역방향유형

1/3의 첫번째
1/3의 두번째
1/3의 세번째
<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>

반응형이 적용된 UI Grid Layout

  • 반응형으로 적용할 경우 Flexbox-full class를 추가해줍니다.
  • Alopex에서 반응형 사이즈는 최소 데스크톱 사이즈인 1024px에서 레이아웃이 모바일 형식으로 떨어지도록 적용했습니다.
반응형 1/2의 첫번째
반응형 1/2의 두번째
반응형 1/3의 첫번째
반응형 1/3의 두번째
반응형 1/3의 세번째
<div class="Flexbox Flexbox-full Flexbox-mobile">
	<div class="Flexbox-cell">반응형 1/2의 첫번째</div>
	<div class="Flexbox-cell">반응형 1/2의 두번째</div>
</div>
<div class="Flexbox Flexbox-full Flexbox-rowreverse Flexbox-mobile">
	<div class="Flexbox-cell">반응형 1/3의 첫번째</div>
	<div class="Flexbox-cell">반응형 1/3의 두번째</div>
	<div class="Flexbox-cell">반응형 1/3의 세번째</div>
</div>

Flexbox Contents Layout

이웃한 Flexbox의 위치를 top/bottom/center 등으로 위치하고자 한다면 Flexbox-itemself-bottom css를 이용해서 align-self property를 적용해줍니다

  • 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;
중앙정렬을 할 경우
item을 top에 위치할 경우
item을 bottom에 위치할 경우
중앙정렬을 할 경우
item을 top에 위치할 경우
item을 bottom에 위치할 경우