CSS | Flex, Flexible Box (플렉스)

Ryan·2020년 11월 14일
1

CSS

목록 보기
13/13
post-thumbnail

플렉스에 대해 알아보자.
Grid의 경우 IE에서 사용이 불가능하기 때문에 아직까지 IE를 사용하는 공기업이 많은 우리나라의 입장에서는 그리드만으로 만들기는 어렵기 때문에 플렉스의 활용이 중요하다.

1. Flex란

: flexbox라 불리는 Flexible Box는 공간의 배분와 정렬을 위한 CSS의 속성으로 주로 레이아웃을 설정할때 사용된다.
보통 레이아웃을 정렬할때 CSS에서 display: block, display: inline-block 등을 이용해 라인을 정렬하는 경우가 많았다. 이제는 이 방법이 아닌 flex를 사용해보자.
이 flex는 주로 가로축과 세로축을 기준으로 표현하게 되는데 그 축에 대해 먼저 알아보자


2. Flex-Direction

: 기준이 되는 축에 대한 개념으로 축은 총 4가지로 구분된다
아래 예시에서 파란색 박스를 Item, 점선을 컨테이너라고 해보자.

  • row : 가로축, 왼쪽부터 오른쪽으로
  • row-reverse : 가로축, 오른쪽부터 왼쪽으로
  • column : 세로축, 위에서 아래로
  • column-reverse : 세로축, 아래서 위로

3. Flex 사용하기

: 이처럼 축방향을 기준으로 속성을 줄 수 있다.

<div class='container'>
  <div>Flex1</div>
  <div>Flex2</div>
  <div>Flex3</div>
</div>
  • 위와 같은 예시의 경우 컨테이너라는 클래스명을 가진 div 안에 3줄의 div가 존재한다
  • 이때 container를 부모, 내부에 있는 3개의 div를 자식으로 표현한다.
<div class='container'>
  <div>Flex1</div>
  <div>Flex2</div>
  <div>Flex3</div>
</div>
  • 이때 flex는 부모에게 넣어 자식 item들의 위치를 정렬하고 크기를 줄 수 있다.
.container {
  display: flex
}
  • flex CSS속성을 주기 위해서는 먼저 display를 flex로 설정해줄 필요가 있다.
.container {
  display: flex
  flex-direction: column
}
  • 위에서 알아봤던 기준 축 설정하는 속성을 넣어보자.
  • column 속성을 넣어 세로 방향으로 쭉 나열한 것을 알 수 있다.
  • row 속성을 넣는다면 inline-block처럼 가로 방향으로 나열하는 것을 볼 수 있을 것이다.

3. Item 정렬하기

: 부모 Container에 여러 속성을 넣어 자식 Item들을 정렬할 수 있다.

(1) 기준 축 정렬

: justify-content 를 이용한다.

.container {
  display: flex
  justify-content: center
}
  • flex-direction 설정이 없다면 기본적으로 row로 설정이 된다.
  • 이때 justify-content 는 이 기준 축인 가로축을 정렬시킨다.
.container {
  display: flex
  flex-direction: column
  justify-content: center
}
  • 만약 flex-direction 설정이 column으로 되어있다면 justify-content세로축을 정렬시킨다.
  • center 속성을 넣었으니 중앙에 정렬될 것이다.
  • flex-start, flex-end, center, space-beetween, space-aroung 등으로 사진처럼 정렬된다.

(2) 교차 축 정렬

: align-item 을 이용한다.

.container {
  display: flex
  align-item: center
}
  • align-itemjustify-content와 다르게 교차 축을 정렬시킨다.
  • 위의 예시의 경우 세로축을 중앙 정렬 시키게 될 것이다.
  • flex-direction 에 따라 어떻게 변경될지도 한번 고민해보자.
  • stretch, flex-start, flex-end, center, baseline 등으로 사진처럼 정렬할 수 있다.

(3) 교차 축 개별 정렬

: align-item 은 부모안의 모든 item들을 정렬했다면 그중 한가지만 개별 적용을 할때는 align-self를 사용한다.

  • 이경우 Item에 직접 속성을 주어야한다.
  • stretch, flex-start, flex-end, center, baseline 등으로 정렬한다.

4. Item 크기 정하기

(1) 너비 정하기

: 사실 item에 width 값을 주어 설정해도 된다. width에 퍼센트 값으로 반응형 크기도 만들 수 있다.
그치만 여러가지 방법들도 한번 알아보자.

  • flex-grow : 증가 너비 비율, 숫자가 크면 더 많은 너비를 가집니다.
  • flex-shrink : 감소하는 너비 비율, Container의 너비가 줄어 Items의 너비에 영향을 미칠 경우, 영향을 미치기 시작한 지점부터 줄어든 거리 만큼 감소 너비 비율에 맞게 Item의 너비가 줄어듭니다.
.item {
  flex: 1 1 20px;  /* 증가너비 감소너비 기본너비 */
  flex: 1 1;  /* 증가너비 감소너비 */
  flex: 1 20px;  /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */
}
  • 위처럼 한번에 작성해줄 수도 있다.

참고자료 : 링크

profile
"꾸준한 삽질과 우연한 성공"

0개의 댓글