StyleSheet/CSS

Flexible box Layout - 플렉스 박스 #2

jaiyah 2018. 10. 12. 14:46

플렉스 박스 #2

앞선 포스팅에서 언급했듯이 플렉스박스 레이아웃 모드는 여유 공간에 따라서 플렉스 항목의 너비 또는 높이를 유연하게 변형시킬 수 있는 기능을 기반으로 하고 있습니다.

그래서 당연히 플렉스박스 모듈은 항목들의 크기를 변화시키는 방법에 대한 탁월한 제어 능력을 제공해 주고 있습니다.


이번 포스팅에서는 앞에서 미처 설명하지 못한 플렉스박스 속성들과 그 기능에 대해 계속 알아보도록 하겠습니다.




order

앞선 내용에서 flex-direction, flex-wrap 그리고 이 두 개의 단축 속성을 지정할 수 있는 flex-flow 들은 플렉스 항목의 순서와 방향을 효과적으로 제어할 수 있게 해줍니다.

그런데 시각적인 순서에 관해서는 이보다 더 제어력이 뛰어난 order 라는 속성이 있습니다.

order 속성은 정수 기반의 값을 수용하기 때문에 z-index 개념과 유사한 방식으로 작용합니다. 

다만 레이어 층으로 구성하지 않고 요소의 흐름상 플렉스 항목이 어디에 나타나야 하는지 그 위치를 결정합니다.

모든 플렉스 항목은 order 값은 0 을 기본값으로 갖게 되고 플렉스 항목들이 동일한 order 값을 공유할 경우 소스에 적힌 순서(마크업 순서)대로 나열(배열)됩니다.

css
/* Code for Safari 6.1 to 8.0 */
div#myRedDIV {-webkit-order: 2;}
div#myBlueDIV {-webkit-order: 4;}
div#myGreenDIV {-webkit-order: 3;}
div#myPinkDIV {-webkit-order: 1;}

/* Standard syntax */
div#myRedDIV {order: 2;}
div#myBlueDIV {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV {order: 1;}

플렉스 컨테이너가 아닌 플렉스 항목(flexible item)에 지정해야 합니다.

order 를 사용할 때 좋은 점은 이것이 실제 콘텐츠와 별개로 동작한다는 점 입니다. 

즉, 마크업은 논리적으로 구성하고 디자인 측면에서 마크업 순서와 상관없이 콘텐츠 구조를 자유롭게 배치시킬 수 있기 때문에 웹 접근성에 위배되지 않도록 구성할 수 있습니다.(스크린 리더[각주:1]나 그 외의 보완기술을 사용하는 사람들에게 웹 접근의 어려움을 최소화시킵니다.)


order 속성값

  • number : 플렉스 항목의 순서를 지정합니다. 기본값은 0 이다.
  • initial : 이 속성의 기본값을 따릅니다.
  • inherit : 부모 요소로부터 값을 상속 받습니다.


지원 현황

IE 

크롬 

파이어폭스 

사파리 

오페라 

IE 11.0 

29.0

28.0 

9.0 

17.0 

  • prefix 를 이용하여 Chrome 21.0, safari 6.1 은 -webkit-, FF 18.0 -moz- 를 이용해 지원할 수 있다.

order DEMO VIEW



justify-content : 수평 정렬

justify-content 속성은 정렬에 관한 것으로 수평 정렬을 처리하는 속성입니다. (단, 수직으로 쓰는 방식을 사용하거나 flex-direction 값이 column 일 경우는 제외된다.)

css
div {
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-around; /* Safari 6.1+ */
    display: flex;
    justify-content: space-around;
}

justify-content 값의 경우 서양식 쓰기 방식을 사용하고 기본 flex-direction의 값은 row라는 가정하에 동작합니다.

즉, 이것은 플렉스 항목의 진행이 왼쪽에서 오른쪽(→), 그리고 위에서 아래(↓)로 나열되는 것을 의미합니다.


CSS Syntax

justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit;


justify-content 속성값

  • flex-start : 기본값으로 플렉스 항목들을 플렉스 컨테이너의 시작 부분(왼쪽)으로 정렬합니다. 
  • flex-end : 플렉스 항목들을 컨테이너의 끝 부분(오른쪽)으로 정렬합니다.
  • center : 플렉스 항목들을 컨테이너의 중앙에 정렬합니다.
  • space-between : 플렉스 항목 중에 첫 번째 항목은 왼쪽 끝, 마지막 항목은 오른쪽 끝에 정렬하고 다른 항목들은 그 사이에 남는 공간을 일정한 간격으로 분배하여 배열합니다.
  • space-around : space-between과 동일하게 적용되지만 첫 번째와 마지막 항목이 각가 왼쪽과 오른쪽의 끝으로 정렬하지 않아도 되고, 간격 역시 정렬된 항목들 주위로 골고루 분배합니다.
  • initial : 이 속성의 기본값을 따릅니다.
  • inherit : 부모 요소로부터 값을 상속 받습니다.

이 값들이 flex-left 또는 flex-right라는 이름으로 만들지 않고 flex-start, flex-end와 같은 이름을 붙인 이유는 전적으로 항목의 방향이 어떻게 지정되는지에 따라 그 효과가 달라질 것이기 때문입니다.

예를 들어서 flex-direction의 값이 column-reverse로 적용된다면 문서의 방향이 아래에서 위(↑)로 진행될 것이고 이때 flex-start는 콘텐츠를 컨테이너의 아래쪽으로 정렬하게 될 것 입니다.


지원 현황

IE 

크롬 

파이어폭스 

사파리 

오페라 

IE 11.0 

29.0

28.0 

9.0 

17.0 

  • prefix 를 이용하여 Chrome 21.0, safari 6.1 은 -webkit-, FF 18.0 -moz- 를 이용해 지원할 수 있다.

justify-cotent DEMO VIEW



align-items

align-items 속성은 플렉스 항목의 정렬을 각각의 항목들과 연관시켜서 제어할 수 있게 합니다.

예를 들어서 플렉스 컨테이너 요소에 display: flex; 를 적용하여 모든 플렉스 항목들이 동일한 높이를 갖게 하고 완벽하게 나란히 옆으로 나열(배열)되도록 했다면 이런 작용은 align-items 속성의 기본값인 stretch에 의한 것입니다. 이 기본값은 일렬로 늘어선 모든 항목들이 그 중 가장 많은 콘텐츠를 포함하고 있는 항목의 높이에 맞춰서 같은 높이가 조정되도록 합니다.

css
div {
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

이 속성은 플렉스 항목이 아닌 플렉스 컨테이너에 지정해야 합니다.


CSS Syntax

align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;


align-items 속성값

  • stretch : 앞서 언급한 대로 기본값이고, 모든 플렉스 항목들이 서로 일치(높이값 동일)하도록 조정합니다.
  • flex-start : 플렉스 항목들을 플렉스 컨테이너의 시작 부분(왼쪽)에 위치시키지만 각 항목의 높이는 각 항목의 콘텐츠 양에 따라 결정됩니다.
  • flex-end : flex-start와 동일한 규칙이지만 플렉스 항목들을 컨테이너의 아래쪽으로 배치합니다.
  • center : 각 항목의 위 아래 잔여 공간을 동일하게 분배하기 때문에 각 항목이 수직을 기준으로 중앙에 정렬합니다.
  • baseline : 모든 플렉스 항목을 콘텐츠에 지정된 기준선을 중심으로 정렬합니다. 기준선은 각 항목마다 다를 수 있습니다.
  • initial : 이 속성의 기본값을 따릅니다.
  • inherit : 부모 요소로부터 값을 상속 받습니다.

align-items  값 살펴보기

지원 현황

IE 

크롬 

파이어폭스 

사파리 

오페라 

IE 11.0 

21.0

20.0 

9.0 

12.1 

  • prefix 를 이용하여 safari 7.0은 -webkit- 을 이용해 지원할 수 있다.

align-items DEMO VIEW



align-self

좀 전의 align-items 속성은 일반적으로 컨테이너가 포함하고 있는 항목들을 정렬하기 위해 그 컨테이너에 적용됩니다. 

그 외 다른 속성은 직접 플렉스 항목에 적용되어 더 강력하게 제어하기도 하는데 이것은 각 항목이 어떤 방식으로 정렬될 것인지 지정할 수 있는데 이 툴이 바로 align-self 속성입니다.

이 속성은 align-items와 동일한 속성값들을 갖고 있으며 정확하게 동일하게 작용합니다. 

단, 차이점은 이 속성이 플렉스 항목에 개별적으로 적용된다는 점 입니다.

css
#demo-01 {
    -webkit-align-self: center; /* Safari 7.0+ */
    align-self: center;
}

예를 들어서 플렉스 항목이 align-items의 기본값인 stretch 값을 취한다고 가정했을 경우 이때 모든 플렉스 항목들은 동일한 높이를 가지게 됩니다.

그런데 이 항목들 중 하나를 컨테이너의 바닥 쪽으로 오게 하면서 그 항목의 실제 콘텐츠 높이를 갖게 하고자 한다면 어떻게 할까?

아래 코드와 같이 다른 방식으로 작용하기 원하는 개별 항목을 대상으로 지정하기만 하면 됩니다.

css
div:last-child {
    -webkit-align-self: flex-end; /* Safari 7.0+ */
    align-self: flex-end;
}


CSS Syntax

align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;


align-self 속성값

  • stretch : 기본값으로 모든 플렉스 항목들이 서로 일치(높이값 동일)하도록 조정합니다.
  • flex-start : 플렉스 항목들을 플렉스 컨테이너의 시작 부분(왼쪽)에 위치시키지만 각 항목의 높이는 각 항목의 콘텐츠 양에 따라 결정됩니다.
  • flex-end : flex-start와 동일한 규칙이지만 플렉스 항목들을 컨테이너의 아래쪽으로 배치합니다.
  • center : 각 항목의 위 아래 잔여 공간을 동일하게 분배하기 때문에 각 항목이 수직을 기준으로 중앙에 정렬합니다.
  • baseline : 모든 플렉스 항목을 콘텐츠에 지정된 기준선을 중심으로 정렬합니다. 기준선은 각 항목마다 다를 수 있습니다.
  • initial : 이 속성의 기본값을 따릅니다.
  • inherit : 부모 요소로부터 값을 상속 받습니다.

align-self 값 살펴보기


지원 현황

IE 

크롬 

파이어폭스 

사파리 

오페라 

IE 11.0 

21.0

20.0 

9.0 

12.1 

  • prefix 를 이용하여 safari 7.0은 -webkit- 을 이용해 지원할 수 있다.

align-self DEMO VIEW



align-content

align-content 속성은 여러 열의 플렉스 컨테이너들이 정렬하는 것을 제어하는 속성입니다.

즉, 플렉스 항목들이 여러 개의 열로 구성(나열)되는 것을 허용합니다. justify-content와 동일한 방식으로 동작하는데 단지 정렬하는 축만 반대입니다.

html
<div class="container">
    <div class="item">1. Lorem ipsum</div>
    <div class="item">2. dolor sit amet</div>
    <div class="item">3. consectetur adipisicing elit.</div>
    <div class="item">4. Dolor dolorem dolores</div>
    <div class="item">5. excepturi iure laborum</div>
    <div class="item">6. placeat quis</div>
    <div class="item">7. quod soluta</div>
    <div class="item">8. sunt voluptatum.</div>
    <div class="item">9. Lorem ipsum dolor sit amet</div>
</div>
css
.container {
  background: #eee;
  width: 960px;
  height: 600px;
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  /* 수평 정렬 */
  -webkit-justify-content: space-around;
  justify-content: space-around;
  /* 수직 정렬 */
  -webkit-align-content: space-around;
  align-content: space-around;
}

.container .item {
  box-sizing: border-box;
  background: #ccc;
  border: 1px solid #fff;
  width: 320px;
  height: 120px;
}


CSS Syntax

align-content: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit;


align-content 속성값

  • stretch : 기본값으로, 컨테이너의 높이와 동일하도로 항목들의 높이를 조정합니다.
  • center : 열들의 위와 아래로 동일하게 공간을 분포시킵니다. 그래서 수직 방향을 기준으로 중앙 정렬된 상태가 됩니다.
  • flex-start : 컨테이너의 맨 위쪽으로 열들을 정렬합니다. 여유 공간은 이 열들의 아래 쪽에 표시됩니다.
  • flex-end : 열들을 컨테이너의 바닥으로 정렬합니다. 여유 공간은 이 열들의 위쪽으로 표시됩니다.
  • space-between : 컨테이너의  맨 위쪽으로 첫 번째 줄이 오고 마지막 줄은 컨테이너의 바닥에 오게 되며, 그 외의 열들은 그 사이에서 동일한 간격을 두고 정렬하게 됩니다.
  • space-around : space-between과 동일한 규칙을 따르지만, 단 남는 공간의 일부가 첫 번째 줄 위와 마지막 줄의 밑에 분포하게 되며 첫 번째 줄과 마지막 줄이 컨테이너의 맨 위와 아래쪽 끝으로 정렬하지 않습니다. 

align-content 값 살펴보기


지원 현황

IE 

크롬 

파이어폭스 

사파리 

오페라 

IE 11.0 

21.0

20.0 

9.0 

12.1 

  • prefix 를 이용하여 safari 7.0은 -webkit- 을 이용해 지원할 수 있다.

align-content DEMO VIEW




플렉스박스에 대한 브라우저 지원 상황

플렉스박스 사양은 이미 속성 이름, 문법과 일부 기능들에 관하여 몇 차례 큰 점검을 거친 상태입니다. 

그 때문에 앞서 가는 개발자들과 브라우저 벤더들이 이 모듈에 대해 모두 신중한 태도를 가지게 되었고 이 플렉스박스를 지원하려고 몇몇 브라우저들은 벤더 접두어마저 제거하기로 결정하기도 했습니다.

아직 플렉스박스의 예전 문법을 사용해야 하는 실정이지만 브라우저는 여전히 업데이트된 모듈을 지원하는 방향으로 진행되는 과도기에 놓여 있습니다.

모바일 시장이 잠깐의 과도기를 거쳤듯이 이제 플렉스박스도 새로운 모듈로 자리매김할 날이 멀지 않았습니다. 


CSS 플렉스박스 레이아웃 브라우저 지원 상황(2015. 12)

브라우저

예전 문법 사용 

새로운 문법 사용 

Chrome 

4+ (접두어 사용) 

21+ (접두어 사용) 

Firefox 

2+ (접두어 사용) 

22+ 

IE 

IE 10 (접두어 사용) 

지원하지 않음 

Safari 

3.1+ (접두어 사용) 

지원하지 않음 

Opera 

지원하지 않음 

15+ (-webkit- 접두어 사용) 



마치며

플렉스박스는 새롭고 흥미진진하며 혁신적입니다. 무엇보다도 반응형 웹에 관한 움직임에 대처하고 웹 페이지를 구현하는 포괄적인 도구로써 자리매김하기 위해서는 현재 CSS가 반드시 갖춰야하는 모듈일 것입니다.

아직 이 플렉스박스가 레이아웃을 위한 실질적인 툴이 되려면 아직 가야할 길이 멀지 모르지만 여러 브라우저들이 플렉스박스를 지원하고 접두어를 제거하게 된 이후에 이 업계의 종사자들이 모듈에 대한 초기 공포와 경계심을 가진다면 한발짝 뒤에서 쫓아가게 될 것입니다.

플렉스박스의 지원 상황이 많이 안정화되어 가고 있는 이 순간, 결코 먼 미래가 아니라 코 앞에 다가옴을 인지하고 다양하게 실험해볼 수 있는 계기가 되기를 바랍니다.


Related Info

  1. 플렉스 박스 #1


Jaehee's WebClub


  1. screen reader: 시각장애인들을 위한 화면 읽기 장치 [본문으로]
저작자표시 변경금지