림찌의 개발일기 💻

[CSS3] Flex 알아보기 본문

CSS

[CSS3] Flex 알아보기

림찌 🥰 2021. 3. 29. 00:27
flexbox
뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공하는
CSS3의 새로운 레이아웃 방식

 

 

위의 그림처럼 레이아웃을 잡을때 사용하는 속성이 몇가지 있다.

 1. float: left, float: right  2. flex  3. grid 

 

이 포스팅은 이 중 display: flex; 에 대해 알아보는 글이다.

 

Flex 호환성 체크

단, flex는 보시다시피 IE6-9에서 지원을 하지 않으니 크로스 브라우징에 유의해서 사용할땐 사용을 지양하는 편이 좋다.

하지만 굉장히 편리한 css 속성이므로 과감하게 IE6-9를 버리는 것도 좋다고 생각한다...

 

 

1. Flexbox 구성

flex container : 부모(상위) 요소

flex item : 복수의 자식(하위)요소

 

2. flex 만드는 법

<ul class="parents">
	<li class="items">
	<li class="items">
	<li class="items">
</ul>

예제 구조

 

 부모 요소에 display: flex; 를 선언한다. 선언한 요소는 flex container가 된다.

 .parents{
 	display: flex;
 }

 

3. 부모(상위) 요소에 들어가는 속성

3-1)  정렬 방향

.parents{
 display: flex;
 flex-direction: row; /* 디폴트값, 왼쪽에서 오른쪽 방향 */
 flex-direction: column; /* 위에서 아래 방향 */
 flex-direction: row-reverse; /* 기본 값의 반대 */
 flex-direction: column-reverse; /* 기본 값의 수직 반대방향 */
}

정렬 방향은 `flex-direction` 속성으로 제어한다.

 

`row` : 왼쪽에서 오른쪽 방향으로 자식 요소들이 정렬된다. 따로 속성을 주지 않아도 디폴트 값으로 들어간다.

`column` : 위에서 아래 방향으로 자식 요소들이 정렬된다.

`row-reverse` : 오른쪽 위치에서 오른쪽 자식요소부터 순차대로 정렬된다.

`column-reverse` : 아래에 위치한 자식 요소부터 수직으로 정렬된다.

 

3-2) 행 나눔

.parents{
 display: flex;
 
 /* 디폴트 값, 자식요소가 다음 줄로 넘어가지 않는다. 한줄배치 */
 flex-wrap: nowrap;
 
 /* 여유 공건이 없을 시 자식요소가 다음줄로 넘어간다. */
 flex-wrap: wrap; 
 
 /* wrap과 같다. 그러나 밑줄이 아닌 윗줄로 넘어간다. */
 flex-wrap: wrap-reverse; 
}

자식요소들의 행을 나누는 건 `flex-wrap` 속성으로 제어한다.

 

`nowrap` : 여유 공간이 없어도 자식요소가 다음 줄로 넘어가지 않고 한줄로 배치된다. 디폴트 값으로 들어간다.

`wrap` : 여유 공간이 없을 시 자식요소가 다음줄(밑줄)로 넘어간다.

`wrap-reverse` : wrap과 같지만 밑줄이 아닌 윗줄로 행이 올라간다.

 

3-3) 수평 방향 정렬 방식

.parents{
  display: flex;
  
  /* 디폴트 값, 자식요소가 부모요소 앞쪽부터 배치된다. */
  justify-content: flex-start;
  
  /* 자식요소는 부모요소 뒤쪽부터 배치된다. */
  justify-content: flex-end;
  
  /* 자식요소는 부모요소 가운데부터 배치된다. */
  justify-content: center;
  
  /* 자식요소 사이에 동일한 간격으로 여유 공간을 두고 배치된다. */
  justify-content: space-between;
  
  /* 자식요소 앞,뒤 그리고 사이 간격에 모두 여유 공간을 두고 배치된다. */
}

자식요소들의 배치 방향을 정할때 사용하는 속성은 `justify-content` 이다. 부모 요소의 너비만큼의 영역에서 움직인다. 

 

`flex-start` : 부모요소 앞쪽부터 배치된다. (왼쪽에서 오른쪽 방향) 디폴트 속성이다.

`flex-end` : 부모요소 뒤쪽부터 배치된다.

`center` : 부모요소 정 가운데부터 배치된다.

`space-between` :  자식요소의 사이 사이 모두 여유 공간을 두고 배치된다. center는 부모요소의 너비 값을 기준으로 가운데에 위치하게 한다면, space-between은 부모요소 너비 값에 꽉차게 들어온다.

 

3-4)  수직 방향 정렬 방식 (두 줄 이상을 가지는 flexbox에서 사용한다)

.parents{
  display: flex;
  
  /* 자식 요소의 높이가 부모 높이와 같게 변경이 된 뒤 연이어 배치 */
  align-items: stretch;
  
  /* 자식요소가 부모요소 높이의 위쪽에 배치된다. */
  align-items: flex-start;
  
  /* 자식요소가 부모요소 높이의 아래쪽에 배치된다. */
  align-items: flex-end;
  
  /* 자식요소가 부모요소 높이의 가운데에 배치된다. */
  align-items: center;
  
  /* 자식요소가 부모요소 높이 기준선에 맞춰 배치된다. */
  align-items: baseline;
}

부모의 높이 값을 기준으로 수직 위치를 잡는 속성은 `align-items` 이다. 간단히 말해서 inline 요소들을 수직 정렬할때쓰는 vertical-align과 같은 역할을 한다고 생각하면 될듯하다.

 

`stretch` : 자식요소의 높이 값이 부모 높이 값과 똑같이 변경되어 배치된다.

`flex-start` : 자식요소가 부모의 위쪽 영역에 위치한다. vertical-align: top; 과 같다

(부모 영역에서 벗어나는게 아니라 부모 높이 안에서 위쪽을 말하는 거다)

`flex-end` : 자식요소가 부모의 아래쪽 영역에 위치한다. vertical-align: bottom;과 같다.

(부모 영역에서 벗어나는게 아니라 부모 높이 안에서 아래쪽) 

`center` : 자식 요소가 부모의 가운데 영역에 위치한다. vertical-align : middle; 과 같다.

`baseline` : 자식 요소가 부모의 기준선에 맞춰져서 배치된다.

 

3-5) flex-wrap 속성의 동작 변경, 플렉스 라인 정렬

parents{
  display: flex;
  
  /* flex 라인의 높이가 남은 공간을 전부 차지한다. */
  align-content: stretch;
  
  /* flex 라인은 부모요소의 앞쪽에 뭉치게된다. */
  align-content: flex-start;
  
  /* flex 라인은 부모요소 뒤쪽에 뭉치게 된다. */
  align-content: flex-end;
  
  /* flex 라인은 부모요소 가운데에 뭉치게 된다. */
  align-content: center;
  
  /* flex 라인이 부모요소에 고르게 분포된다. */
  align-content: space-between;
  
  /* flex 라인은 부모요소에 고르게 분포된다. 단, 양쪽 끝에 공간을 남긴다 */
  align-content: space-around;
}

 

flex-wrap의 속성을 제어하는 속성은 `align-content` 이다. 언뜻보면 align-items와 비슷하지만 조금 다르다. 

`align-content`는 자식요소가 두줄 이상이고 여백이 있을 경우에 사용할 수 있다.

 

`stretch` : flex라인의 높이가 남은 공간만큼 자식요소의 높이값이 늘어난다.

`flex-start` : 왼쪽에서 오른쪽으로 뭉치게 된다.

`flex-end` : 오른쪽에서 왼쪽으로 뭉치게된다.

`center` : 부모 너비 값을 기준으로 가운데에 뭉치게 된다.

`space-between` : 부모 요소 안에 고르게 분포된다.

`spance-around` : 부모 요소 안에 고르게 분포된다. 단, 양쪽 끝에 공간을 남긴다.

 

4. 자식(하위)요소에 들어가는 속성

4-1) 자식 요소의 너비를 설정하는 단축 속성 (너비 증가, 감소, 디폴트)

.children{
  /* 자식요소의 증가 너비 비율을 설정한다. 0이 디폴트 값이다. */
  flex-grow: 0; 

  /* 자식요소의 감소 너비 비율을 설정한다. 1이 디폴트 값이다. */
  flex-shrink: 1;

  /* 자식요소의 (공간 배분 전) 기본 너비를 설정한다. auto가 디폴트 값이다. */
  flex-basis: auto;
}

1. flex-grow

flex-grow 속성은 속성값이 0이면 상위요소의 크기가 커져서 하위요소의 크기가 커지지 않고 원래 크기로 유지된다.

상위요소의 크기가 커질때 하위 요소의 크기도 함께 커지게 하려면 1이상의 값을 속성 값으로 설정해야한다. 

속성값이 1 이상이면 하위요소의 원래 크기에 상관없이 상위 요소를 채우도록 하위요소의 크기가 커진다.

 

2. flex-shrink

flex-shrink 속성은 하위요소의 축소에 관련된 속성이다.

속성값이 0이면 상위요소의 크기가 하위 요소의 크기보다 작아져도 하위요소의 크기가 줄어들지 않고 원래 크기를 유지한다.

속성값이 1 이상이면 상위요소의 크기가 하위 요소의 크기보다 작아질 때, 하위 요소의 크기가 상위 요소의 크기에 맞추어 줄어든다.

 

3. flex-basis

flex-basis 속성은 하위 요소의 기본 크기를 결정하는 속성이다. (디폴트 값 : auto)

width 속성에서 사용하는 모든 단위(px, %, em, rem...)를 속성값에 사용이 가능하다. flex-basis의 값을 10px이나 10%와 같이 설정하면 하위 요소의 크기가 고정된다.

 

flex-basis에서 자주 사용하는 속성은 auto와 0이다. 속성값을 0으로 설정하면 하위 요소는 절대적이 되어 상위요소를 기준으로 크기가 결정되기 때문이다. 단, 값을 0으로 설정할때는 단위값도 함께 작성해주어야 한다. auto 속성은 하위요소가 상대적이 되어 콘텐츠의 크기를 기준으로 크기가 결정된다.

 

flex-grow, flex-shrink, flex-basis는 함께 축약어로 사용할 수 있다.

 

4. flex 

 

위의 하위요소의 크기를 설정하는 세가지 속성은 축약으로 사용할 수 있다. 

.children{
  /* flex : 증가너비(flex-grow) 감소너비(flex-shrink) 기본너비(flex-basis) */
  flex: 1 1 10px;
  
  /* flex : 증가너비(flex-grow) 감소너비(flex-shrink) */
  flex: 1 1;
  
  /* flex: 증가너비(flex-grow) 기본너비(flex-basis, 단위 사용시 flex-basis 적용) */
  flex: 1 20px;
}

 

flex-grow를 제외한 개별 속성은 생략이 가능하다. flex:1; 로 생략도 가능한데, 이는 flex-grow:1; 로 적용되고 나머지 두 속성은 디폴트 값으로 적용이된다. 그러나 flex-basis의 디폴트 값은 auto지만, 생략시엔 0으로 적용이된다. 

 

4-2)  자식요소(하위요소) 개별 정렬

.children{
  /* 부모요소의 속성에 따라 자동정렬 */
  align-items: auto;
  
  /* 왼쪽에서 오른쪽 */
  align-items: flex-start;
  
  /* 오른쪽에서 왼쪽 */
  align-items: flex-end;
  
  /* 가운데 정렬 */
  align-items: center;
  
  /* 부모요소의 높이값만큼 늘어남 */
  align-items: stretch;
  
  /* 폰트의 기준선에 맞춰 정렬 */
  align-items: baseline;
}

`align-items`는 부모요소의 정렬 속성을 무시하고 하위요소에게 따로 수직 정렬값을 정의할 수 있다.

 

`auto` : 부모요소의 속성에 따라 자동으로 정렬된다. 디폴트 값이다.

`flex-start` : 왼쪽에서 오른쪽으로 정렬된다.

`flex-end` : 오른쪽에서 왼쪽으로 정렬된다.

`center` : 부모 요소의 높이 기준으로 중앙 정렬된다.

`stretch` : 부모요소의 높이에 맞춰서 늘어난다. (단, 자식의 높이값이 지정되어있지 않은 경우)

`baseline` : 폰트의 기준선에 맞춰서 정렬된다. 

 

이로써 flex의 큼지막한 속성들을 정리해보았다.

flex 속성은 간편해서 자주 사용해보고싶지만 회사에선 크로스브라우징 문제때문에 자주 사용하지 못해서 안타까운 속성이다...

모든 회사가 IE를 버린다면 모든 퍼블리셔들이 행복해질텐데... ㅠㅠ

Comments