S1 Unit 6. [심화] flexbox

나현·2022년 8월 29일
0

학습일지

목록 보기
8/53
post-thumbnail

이 포스트는 S1 Unit 6. HTML/CSS 활용에서 다뤘던 flexbox의 내용을 보다 자세히 정리하기 위하여 작성했습니다.

지난 Unit 5에서 간단하게 다루었던 개념이다. display:flex와 관련된 속성을 이용해 웹 레이아웃을 효과적으로 구성할 수 있다.

1. flexbox의 기본 개념

flexbox는 레이아웃을 효과적으로 배치하기 위한 CSS 개념이다.
이 방법을 알면 큰 틀에 여러 요소를 배치할 수 있는데
사용하기 위해 몇가지 개념을 알아야 한다.

flexbox model

flexbox는 큰 틀에 여러 요소를 배치하기 위해 사용하는 CSS이다.
'큰 틀'을 flex-container (부모 요소)
그 안의 '여러 요소'들을 flex-item (자식 요소)이라고 한다.

그리고 flex와 관련된 CSS를 이해하기 위해서는 아래의 flexbox 모델을 알아야 한다.
flexbox model

각 위치의 이름을 잘 알아두어야 한다. main axis, main start, main end, cross axis, cross start, cross end 등은 각각 레이아웃 배치나 정렬시 기준이 될 수 있다.
처음의 설명과 이미지를 토대로 flex의 기본 개념에 대해 정리하면 아래와 같다.

  • flex container : 'display: flex;'가 설정된 부모 요소
  • flex item : flex container 내부에 flexbox로 레이아웃되는 자식 요소(들)
  • 기본 축(main axis) : flex item이 배치되는 방향의 축. 기본은 flex container의 가로 방향. 이 기본 축의 시작과 끝을 각각 main start, main end라고 한다.
  • 교차축(cross axis) : flex item이 배치되는 방향에 직각을 이루는 축. 기본은 flex container의 세로 방향. 이 축의 시작과 끝을 각각 cross start, cross end라고 한다.

이미지 출처, 내용 참고: https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox

기본 적용 방법

기본 개념을 알았으면, 배치할 부모 요소와 자식 요소를 가지고 본격적으로 사용할 일만 남았다.
flexbox를 적용하는 제일 쉬운 방법은 그저 부모 요소에 display:flex를 선언하면 된다.

.flex-container{ display:flex; } 

그리고 메인 축, 교차 축과 관련해 각각의 부모 요소와 자식 요소에 원하는 CSS를 적용하면 된다.
적용되는 CSS를 정리하면 다음과 같다.

  • flex-container (부모 요소)
    • 자식 요소의 전체적인 배열, 배치 순서 등을 결정
    • 관련 CSS:
      flex-direction, flex-wrap, justify-content, align-items, align-content
  • flex-item (자식 요소)
    • 자식 요소 간의 배열, 각 요소의 개별 설정
    • 관련 CSS:
      order, flex-grow, flex-shrink, flex-basis. align-self

정리한 내용대로 2번부터는 부모 요소, 자식 요소 각각의 관련된 CSS를 좀 더 자세히 알아보고자 한다.

설명에 앞서 다음의 codepen 자료를 참고하여 직접 확인해보면 이해가 빠르다.

출처: [Flexbox playground] https://codepen.io/enxaneta/pen/adLPwv

2. flexbox CSS : flex container (부모 요소) 관련

부모 요소에 적용할 수 있는 관련 CSS에 대해 알아보자.

속성설명속성값
flex-direction기본 축 방향 설정row, row-reverse, column, column-reverse
flex-wrap줄(행) 배치 설정nowrap, wrap, wrap-reverse
justify-content수평 정렬 설정(기준: 기본 축)flex-start, flex-end, center, space-between, space-around
align-items수직 정렬 설정(기준: 교차 축)stretch, flex-start, flex-end, center, baseline
align-content수직 정렬 설정(기준: 교차 축)stretch, flex-start, flex-end, space-between, space-around

1) flex-direction 속성

flex-direction은 기본 축(main axis)의 방향을 정한다.
속성값: row, row-reverse, column, column-reverse

  • flex-direction: row;
    flex-direction속성의 기본값.
    자식 요소를 좌-우 방향 순서로 배치
    (기본축 main-start -> main-end 방향)
  • flex-direction: row-reverse;
    자식 요소를 우-좌 방향 순서로 배치
    (기본축 main-end -> main-start 방향)
  • flex-direction: column;
    자식 요소를 상-하 방향 순서로 배치
    (기본축 cross-start -> cross-end 방향)
  • flex-direction: column-reverse;
    자식 요소를 하-상 방향 순서로 배치
    (기본축 cross-end -> cross-start 방향)

2) flex-wrap 속성

flex-wrap은 자식 요소가 많을 경우 1줄 또는 여러줄로 배치할 때 사용한다.
속성값: nowrap, wrap, wrap-reverse

  • flex-wrap: nowrap;
    flex-wrap 속성의 기본값.
    자식 요소를 1줄로 배치.
    전체 flex-item 너비===flex-container 너비
    가 되도록 자식 요소의 너비가 자동조절 된다.
  • flex-wrap: wrap;
    전체 flex-item 너비의 합 > flex-container 너비 일 때
    자식 요소를 여러 줄로 배치.
    flex-item은 좌-우의 순서로, 전체 줄은 상-하의 순서
  • flex-wrap: wrap-reverse;
    flex-wrap: wrap; 과 같으나
    전체 줄은 하-상의 순서

3) justify-content 속성

기본 축을 기준으로 자식 요소를 수평 정렬하는 방법이다.
속성값: flex-start, flex-end, center, space-between, space-around

  • justify-content: flex-start;
    justify-content 속성의 기본값
    자식 요소를 main start(좌측)를 기준으로 정렬
  • justify-content: flex-end;
    자식 요소를 main end(좌측)를 기준으로 정렬
  • justify-content: center;
    자식 요소를 가운데 정렬
  • justify-content: space-between;
    전체 자식 요소의 처음과 끝이 main-start, main-end에 닿으며
    그 사이의 간격이 일정하도록 정렬
  • justify-content: space-around;
    전체 자식 요소를 균등한 간격으로 정렬(요소 좌우 여백이 같음)
    ex) 여백5px 요소 '여백5px 여백5px' 요소 여백5px
  • justify-content: space-evenly;
    space-around와 비슷하나 요소 좌우의 맞닿는 부분의 여백도 균등하게 자동으로 맞춰준다.
    ex) 여백5px 요소 '여백5px' 요소 여백5px

아래의 그림을 보면 좀 더 이해가 쉽다.
justify-content의 속성값 결과 한눈에 보기
이미지 출처: https://htmlcss.jp/css/justify-content.html

4) align-items 속성

교차 축을 기준으로 자식 요소를 수직 정렬하는 방법이다.
속성값: stretch, flex-start, flex-end, center, baseline

  • align-items: stretch;
    align-items 속성의 기본값
    모든 자식요소의 높이가 flex container의 높이(cross start~cross end까지)만큼 꽉 차도록 자동 조절된다.
  • align-items: flex-start;
    모든 자식 요소가 cross start쪽에 붙어서 정렬된다.
  • align-items: flex-end;
    모든 자식 요소가 cross end쪽에 붙어서 정렬된다.
  • align-items: center;
    모든 자식 요소가 교차 축의 중심에 정렬된다.
  • align-items: baseline;
    모든 자식 요소가 flex container의 baseline에 맞춰서 정렬된다.

아래의 이미지를 보면 좀 더 이해가 쉽다.

이미지 출처: https://css-tricks.com/almanac/properties/a/align-items/

5) align-content

교차 축을 기준으로 자식 요소를 수직 정렬하는 방법이다.
속성값: stretch, flex-start, flex-end, space-between, space-around

  • align-content: stretch;
    align-content 속성의 기본값.
    모든 자식 요소는 줄바꿈될 경우
    행 사이의 간격이 균등한 간격으로 배치된다.
  • align-content: flex-start;
    모든 자식 요소가 줄바꿈될 경우
    cross start 쪽에 간격없이 붙어서 배치된다.
  • align-content: flex-end;
    모든 자식 요소가 줄바꿈될 경우
    cross end 쪽에 간격없이 붙어서 배치된다.
    *align-content: center;
    모든 자식 요소가 줄바꿈될 경우
    교차 축의 중앙에 간격없이 붙어서 배치된다.
  • align-content: space-between;
    모든 자식 요소가 줄바꿈될 경우
    처음 줄은 cross start 쪽에, 마지막 줄은 cross end 쪽에 붙어서
    균등한 가격으로 배치된다.
  • align-content: space-around;
    모든 자식 요소가 줄바꿈될 경우
    줄은 위 아래로 균등한 간격을 유지하며 배치된다.

아래의 이미지를 보면 좀 더 이해가 쉽다.
align-content 한 눈에 보기

이미지 출처: https://css-tricks.com/almanac/properties/a/align-content/

3. flexbox CSS : flex item (자식 요소) 관련

이번에는 자식 요소에 적용할 수 있는 관련 CSS에 대해 알아보자.

속성설명
order배치 순서
flex-grow너비 설정(기본값 0, 양의 정수값)
flex-shrink너비 축소 설정(기본값 1, 양의 정수값)
flex-basis너비 값(기본값 auto/ px,% 사용가능)
align-self개별 수직 정렬(기본값 auto/기준: 교차축/부모 요소의 align-items보다 우선)

1) order 속성

개별 자식 요소의 배치 순서를 바꿀 수 있다.
기본값은 0으로 양의 정수값을 사용한다.
HTML 코드를 변경하지 않고 요소를 재배치할 수 있으며 기본 배치 순서는 flex container에 추가된 순서다.

2) flex-grow 속성

개별 자식 요소 너비의 비율을 설정할 수 있다.
기본값 0으로 양의 정수값이다.
정수값을 이용해 너비를 비율처럼 설정할 수 있다.

3) flex-shrink 속성

개별 자식 요소 너비의 비율을 축소 설정할 수 있다.
기본값 1로 양의 정수값이다.
만약 값이 0일 경우 요소 원래의 너비를 유지하게 된다.

4) flex-basis 속성

개별 자식 요소의 너비 값을 설정할 수 있다.
기본값은 auto로 px,%를 사용해 원하는 값으로 설정할 수 있다.

5) align-self 속성

개별 자식 요소의 수직 정렬을 설정할 수 있다.
기본값 auto로 기준은 교차축이다.
부모 요소의 align-items보다 우선하여 적용된다.

4. flexbox CSS : 축약형(shorthand)

flex-flow

flex-direction, flex-wrap 속성을 동시에 쓸 수 있다.
기본값은 flex-flow: row nowrap;

flex

flex-grow, flex-shrink, flex-basis 속성을 동시에 쓸 수 있다.
기본값은 flex: 0 1 auto;

.flex-container {
  flex-flow: <flex-direction> || <flex-wrap>;
}
.flex-item {
  flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
}

flex 축약형은 속성값을 하나만 쓸 경우 아래 표와 같은 의미를 가진다.

flexflex-growflex-shrinkflex-basis
기본값01auto
none00auto
auto11auto
양의 정수양의 정수10

참고 자료:

profile
프론트엔드 개발자 NH입니다. 시리즈로 보시면 더 쉽게 여러 글들을 볼 수 있습니다!

0개의 댓글