본문 바로가기
FRONT/CSS

css : Flex 알아가기

뽀송희 2020. 5. 25. 12:24

들어가기 전..

 

제 첫 포스팅입니다. 이번에 프론트엔드 면접을 보면서 flex 관련 질문이 나왔고 시원하게 대답을 하지 못했습니다. ㅠ-ㅠ

반성하자는 의미에서 flex에 대한 포스팅을 적습니다..

 

FLEX? 너 뭐하는 놈이야?

css의 flex. 이야기가 많이 나오죠. 요즘 흔히들 말하는 자랑할 때의 FLEX? 언어유희입니다. 하하..!

(MDN曰) flexbox가 웹 개발자들의 관심 받게된 이유 중 하나는 웹 최초로 적절한 정렬 기능을 제공했기 때문입니다. 

물론,  <table> 이나  float   inline-block 등으로 정렬하는 경우도 있지만, clear를 꼭 해줘야 하거나 inline-block의 기본 여백 등 문제가 있기에 우리는  flex 를 사용하는 것이 좋습니다.

 

Flex(Flexible Box)는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 css의 속성(도구?)입니다.

사이즈가 불명확하거나 동적으로 변화하는 요소들을 유연하게 잡아줘 레이아웃을 편하게 만들 수 있습니다.

하지만, IE 9 이하 버전 브라우저는 플렉스를 지원하지 않습니다.

IE 10 브라우저는 2012년의 플렉스를 지원하는데 플렉스 속성에  -ms-  제조사 접두어를 붙여야 합니다.

 

- CSS3 플렉스 박스(flex box) 지원 버전

속성 IE Chorme Firefox Safari
single-line 11.0 29.0
21.0 -webkit-		 22.0
18.0 -moz-		 6.1 -webkit-
multi-line 11.0 29.0
21.0 -webkit-
 28.0 6.1 -webkit-

 

 

이번 포스팅에서 안내해드릴 flexbox 속성은 다음과 같습니다.

 

  • flex? display HTML 요소에 대한 박스의 타입
  • flex-basis 요소의 초기 크기
  • flex-direction 요소가 위치 할 방향
  • flex-wrap 플렉스 라인에 여유 공간이 없을 때, 요소를 다음 줄로 넘길지 유무
  • flex-flow flex-direction과 flex-wrap 속성을 이용한 스타일을 한줄에 설정
  • flex-grow 요소의 확대 인자
  • flex-shrink 요소의 축소 인자
  • justify-content 플렉 라인에 여유 공간이 있을 때, 요소와 요소의 간격
  • align-items 요소의 수직 방향 정렬 방식을 설정 (이번주내로 작성하겠습니다..)
  • align-content flex-wrap 속성의 동작을 변경 및 라인 정렬 (이번 주내로 작성하겠습니다..)

 

 

flex? display

플렉스 박스는 플렉스 컨테이너(container)와 플렉스 요소(item)로 구성됩니다.

flex를 사용하기 위해서는 플렉스 컨테이너 태그에  display 속성을 설정해줘야 합니다.

요소를 block 타입으로 정의하려면  display  속성 값을  flex 로,

인라인 타입으로 정의하려면  inline-flex 로 설정합니다.

컨테이너는 하나 이상의 요소를 포함하고 있어야 합니다.

<ul style="display: flex;">
	<li>block 타입입니다.</li>
</ul>

<ul style="display: inline-flex;">
	<li>inline 타입입니다.</li>
</ul>

 

 

flex-basis

flexbox 항목의 초기 크기를 정의합니다.

 

 

 

flex-basis: auto;

(default) 임의의 height, widtht 값을 기준으로 자동으로 크기가 조정됩니다.

flex-basis: auto;
-------------------------------------
<ul style="display: flex;">
  <li style="flex-basis: auto;">1</li>
  <li style="flex-basis: auto;">2</li>
  <li style="flex-basis: auto;">3</li>
</ul>

 

 


flex-basis: @px;

pixel 또는 (r)em 값을 정의할 수 있습니다.

flex-basis: @px;
-------------------------------------
<ul style="display: flex;">
  <li style="flex-basis: 80px;">1</li>
  <li style="flex-basis: 80px;">2</li>
  <li style="flex-basis: 80px;">3</li>
</ul>

 

 

 

flex-direction

flexbox 컨테이너 내에서 요소가 배치될 방향를 지정합니다.

 

 

 

flex-direction: row;

(default) flex 요소는 왼쪽에서 오른쪽으로, 위쪽에서 아래쪽으로 배치됩니다.

flex-direction: row;
-------------------------------------
<ul style="display: flex; flex-direction: row;">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

 

 

 

flex-direction: row-reverse;

flext 요소는 오른쪽에서 왼쪽으로, 위쪽에서 아래쪽으로 배치됩니다.

flex-direction: row-reverse;
-------------------------------------
<ul style="display: flex; flex-direction: row-reverse;">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

 

 

 

flex-direction: column;

flext 요소는 수직 방향으로 위쪽에서 아래쪽으로 배치됩니다.

flex-direction: column;
-------------------------------------
<ul style="display: flex; flex-direction: column;">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

 

 

 

flex-direction: column-reverse;

flext 요소는 수직 방향으로 아래쪽에서 위쪽으로 배치됩니다.

flex-direction: column-reverse;
-------------------------------------
<ul style="display: flex; flex-direction: column-reverse;">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

 

 

 

 

flex-wrap

플렉스 라인에 여유 공간이 없을 시, 플렉스 요소가 다음 줄로 넘길지 지정합니다.

 

 

 

flex-wrap: nowrap;

(default) flexbox 요소가 무엇이든 상관없이 한 줄로 배치됩니다.

flex-wrap:nowrap;
-------------------------------------
<ul style="display: flex; flex-wrap:nowrap;">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

 

 

 

flex-wrap: wrap;

플렉스 컨테이너의 여유 공간이 없다면 플렉스 요소는 다음 줄로 넘어가 배치됩니다.

flex-wrap:wrap;
-------------------------------------
<ul style="display: flex; flex-wrap:wrap;">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

 

 

 

flex-wrap: wrap-reverse;

플렉스 컨테이너의 여유 공간이 없다면 플렉스 요소는 다음 줄로 넘어가 배치됩니다.

단, 추가 라인이 위쪽(앞쪽)에 나타납니다.

flex-wrap:wrap-reverse;
-------------------------------------
<ul style="display: flex; flex-wrap:wrap-reverse;">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

 

 

 

flex-flow

 flex-direction  과  flex-wrap  속성을 이용한 스타일을 한줄에 설정합니다.

 

 

 

flex-flow: row(flex-direction) nowrap(flex-wrap);

(default) 단축 속성으로 요소의 방향(main-direction)과 여러 줄 묶음(줄 바꿈)도 설정합니다.

flex-flow: row(flex-direction) nowrap(flex-wrap);
-------------------------------------
<ul style="display: flex; flex-flow: row nowrap;">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

 

값 의미 기본값
flex-direction 요소의 방향(주축) 지정  row
flex-wrap 요소의 줄바꿈 설정  nowrap 

 

 

 

flex-grow

요소의 너비 확대 인자를 지정해줍니다.

단, flex-grow 값은 양의 정수여야 합니다.

각 요소의 너비를 1이라고 했을 때, (요소의 flex-grow 값 / 모든 요소의 flex-grow를 합) 만큼의 너비를 갖게 됩니다.

 

 

 

flex-grow: 0;

(default) 컨테이너가 여유 공간이 있어도 요소의 너비가 변하지 않습니다.

flex-grow: 0;
-------------------------------------
<ul style="display: flex;">
  <li style="flex-grow:0;">1</li>
  <li style="flex-grow:0;">2</li>
  <li style="flex-grow:0;">3</li>
</ul>

 

 

 

flex-grow: 1;

컨테이너의 여유 공간이 있다면 요소는 1배 증가합니다.

다른 요소의 flex-grow 값이 없다면 나머지 공간을 채워줍니다.

flex-grow: 1;
-------------------------------------
<ul style="display: flex;">
  <li style="flex-grow:1;">1</li>
  <li style="flex-grow:0;">2</li>
  <li style="flex-grow:0;">3</li>
</ul>

 

 

 

flex-grow: 2;

flex-grow 값은 상대적이므로 형제의 값에 따라 너비가 늘어납니다.

flex-wrap:wrap-reverse;
-------------------------------------
<ul style="display: flex;">
  <li style="flex-grow:1;">1</li>
  <li style="flex-grow:2;">2</li>
  <li style="flex-grow:0;">3</li>
</ul>

 

 

 

flex-shrink

요소의 너비 축소 인자를 지정해줍니다.

단, flex-shrink 값은 양의 정수여야 합니다.

flex-shrink 값을 0으로 할 시 너비는 고정됩니다.

 

 

 

flex-shrink: 1;

(default) 컨테이너가 여유 공간이 없다면 요소의 너비가 줄어듭니다.

flex-shrink: 1;
-------------------------------------
<ul style="display: flex;">
  <li style="flex-shrink:1;">flex-shrink 1</li>
  <li style="flex-shrink:1;">flex-shrink 1</li>
  <li style="flex-shrink:1;">flex-shrink 1</li>
</ul>

 

 

 

flex-shrink: 0;

컨테이너가 여유 공간이 없어도 요소의 너비가 줄어듭니다.

flex-shrink: 0;
-------------------------------------
<ul style="display: flex;">
  <li style="flex-shrink:0;">flex-shrink 0</li>
  <li style="flex-shrink:1;">flex-shrink 1</li>
  <li style="flex-shrink:1;">flex-shrink 1</li>
</ul>

 

 

 

flex-shrink: 3;

flex-shrink 값은 상대적임으로 형제의 값에 따라 너비가 줄어듭니다.

flex-shrink:3;
-------------------------------------
<ul style="display: flex;">
  <li style="flex-grow:1;">flex-shrink 1</li>
  <li style="flex-grow:3;">flex-shrink 3</li>
  <li style="flex-grow:1;">flex-shrink 1</li>
</ul>

 

 

 

justify-content

컨테이너의 여유 공간이 있을 경우, 요소와 요소 사이의 간격을 지정합니다.

 flex-direction 이  row  나  row-reverse 인 경우 x축 간격을,

 flex-direction 이  column  이나  column-reverse  인 경우 y축의 간격을 제어합니다.

value : flex-start | flex-start | flex-start | flex-start | flex-start 

값이  top ,  right , bottom ,  left 가 아닌 이유는 flex-direction  값에 따라 달라질 수 있기 때문입니다.

개별적으로 빈 공간을 제어하려면 요소에 별도의  margin 을 지정해주어야 합니다.

 

 

 

justify-content: flex-start;

(default) 요소는 컨테이너의 앞쪽부터 배치됩니다.

justify-content: flex-start;
-------------------------------------
<ul style="display: flex; justify-content: flex-start;">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

 

 

 

justify-content: flex-end;

요소는 컨테이너의 뒤쪽부터 배치됩니다.

justify-content: flex-end;
-------------------------------------
<ul style="display: flex; justify-content: flex-end;">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

 

 

 

justify-content: center;

요소는 플렉스 컨테이너의 가운데에서부터 배치됩니다.

justify-content: center;
-------------------------------------
<ul style="display: flex; justify-content: center;">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

 

 

 

justify-content: space-between;

요소는 요소들 사이에만 여유 공간을 두고 배치합니다.

justify-content: space-between;
-------------------------------------
<ul style="display: flex; justify-content: space-between;">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

 

 

 

justify-content: space-around;

요소는 앞, 뒤, 그리고 요소들 사이에도 모두 여유 공간을 두고 배치합니다.

justify-content: space-around;
-------------------------------------
<ul style="display: flex; justify-content: space-around;">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

 

 

 

 

 

 

PS

 

깊게 알고 싶으신 분들은.. MDN을 추천드립니다 >_ㅇ

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container

 

Aligning Items in a Flex Container

flexbox가 웹 개발자들의 관심 받게된 이유 중 하나는 웹 최초로 최초로 적절한 정렬 기능을 제공했기 때문입니다. flexbox의 수직 정렬 기능을 이용하여 우리는 드디어 쉽게 박스(역주: 여기서 박스

developer.mozilla.org

저는 css reference, TCP School 참고하였습니다.

https://cssreference.io/

 

CSS Reference

CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.

cssreference.io

http://tcpschool.com/css/css3_expand_flexbox

 

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

 

'FRONT > CSS' 카테고리의 다른 글

translate() 그리고 absolute positioning  (0) 2020.05.28

'FRONT/CSS' Related Articles

티스토리툴바