[CSS] flex

flex 사용 연습

• flex 개구리

  • flex에 대한 설명과 게임을 통한 연습으로, flex 사용을 익히기에 좋다.

• flex 디펜스

  • 영어로 된 설명, 게임을 통한 연습으로 flex 사용을 익히기에 좋다.
  • 내용 자체는 "flex 개구리"를 넘는 것은 없어서, 바로바로 문제를 풀어보면 된다.
  • ★ main axis, cross axis 설명은 보는 게 좋다.

• flex playground

  • 속성 값을 변경하면서 테스트 해보는 사이트
  • 값 변경을 하면 바로 결과가 보여서, 각 속성 및 속성값을 이해하기 좋다.

• "이번에야 말로 css flex를 익혀보자"

  • 위 3가지를 모두 진행한 후에 읽어보도록 한다.
  • 외부자료인데 굉장히 좋은 자료. flex에 대한 완전한 메뉴얼 같은 것
  • flex에 대해 정리가 아주 잘 되어있다.
  • flex- shrink 부터 보면 됨

display: flex;

• style 속성에서 display 속성을 flex로 설정하면 컨테이너 안의 요소들의 가로, 세로 정렬을 자유롭게 할 수 있다.
• 가로, 세로 정렬뿐만 아니라 가운데, 거꾸로, 간격 정렬 등 여러 가지 정렬이 가능하다.
• display: flex; 속성 설정과 함께 다른 속성들을 설정함으로써 자유롭게 정렬을 할 수 있다.

#pond {
    display: flex;
    align-items: flex-start;
}

.yellow {
    align-self: flex-end;
}

Style 속성

• justify-content : 컨테이너 내부 요소들을 가로선 상(main축)에서 정렬

  • flex-start : 요소들을 컨테이너의 왼쪽으로 정렬(시작점)
    • default
  • flex-end : 요소들을 컨테이너의 오른쪽으로 정렬(끝점)
  • center : 요소들을 컨테이너의 가운데로 정렬
  • space-between : 요소들 사이에 동일한 간격
  • space-around : 요소들 주위에 동일한 간격
  • space-evenly : 요소들 주위와 양 끝에 동일한 간격
    • MS계열 브라우저(엣지, IE)에서는 지원 안됨

  #pond {
      display: flex;
      justify-content: flex-end;
   }

• align-items : 컨테이너 내부 요소들을 세로선 상(cross축)에서 정렬

  • flex-start : 요소들을 컨테이너의 꼭대기로 정렬(시작점)
  • flex-end : 요소들을 컨테이너의 바닥으로 정렬(끝점)
  • center : 요소들을 컨테이너의 세로선 상의 가운데로 정렬
  • baseline : 요소들을 텍스트 베이스 라인을 기준으로 정렬

  

  • stretch : 요소들을 컨테이너에 맞도록 늘립니다.
    • default

  #pond {
       display: flex;
       align-items: flex-end;
   }

• flex-direction : 컨테이너 내부 요소들의 정렬 방향 지정

  • row : 요소들을 텍스트의 방향과 동일하게 정렬
    • default
  • row-reverse : 요소들을 텍스트의 반대 방향으로 정렬
  • column : 요소들을 위에서 아래로 정렬
  • column-reverse : 요소들을 아래에서 위로 정렬

  #pond {
      display: flex;
      flex-direction: column;
   }

• order : 컨테이너의 요소들의 row나 column의 순서를 설정

  • 개별 요소에 적용하는 속성
  • 기본 값은 0이며, 양수나 음수로 바꿀 수 있다.
  • ex) 5개 요소가 있고, 2개를 1로 설정할 경우
    • 0, 0, 0, 1, 1 과 같은 원리로, 1로 설정한 2개는 맨 오른쪽에 위치한다.

  #pond {
       display: flex;
   }
  
   .red {
       order: -1;
   }

• align-self : 컨테이너 내부 요소들을 세로선 상에서 정렬

  • 개별 요소에 적용하는 속성
  • 기본값 : auto
  • align-items가 사용하는 속성값들을 사용
  • flex-start : 요소들을 컨테이너의 꼭대기로 정렬
  • flex-end : 요소들을 컨테이너의 바닥으로 정렬
  • center : 요소들을 컨테이너의 세로선 상의 가운데로 정렬
  • baseline : 요소들을 컨테이너의 시작 위치에 정렬
  • stretch : 요소들을 컨테이너에 맞도록 늘립니다.

  #pond {
       display: flex;
       align-items: flex-start;
   }
  
   .yellow {
       align-self: flex-end;
   }

• flex-wrap : 컨테이너의 요소들을 "한 줄" 또는 "여러 줄"에 정렬.

  • nowrap : 모든 요소들을 한 줄에 정렬
    • default
  • wrap : 요소들을 여러 줄에 걸쳐 정렬
  • wrap-reverse : 요소들을 여러 줄에 걸쳐 반대로 정렬

  #pond {
      display: flex;
      flex-wrap: wrap;
  }

• flex-flow : flex-direction과 flex-wrap "두 속성"의 값들을 인자로 받습니다.

  • ex) row wrap : 요소들을 가로선 상의 여러줄에 걸쳐 정렬
  • ex) column wrap : 요소들을 세로선 상의 **여러줄에 걸쳐 정렬
  • 기본 값 : row nowrap

  #pond {
      display: flex;
      flex-flow: column wrap;
   }

• align-content : 컨테이너 요소들에 대한 여러 줄 사이의 간격을 지정

  즉 flex-wrap: wrap;과 함께 사용될 것이다.

  • flex-start : 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
  • flex-end : 여러 줄들을 컨테이너의 바닥에 정렬합니다.여러 줄들을 세로선 상의 가운데에 정렬합니다.
  • center : 여러 줄들을 세로선 상의 가운데에 정렬합니다.
  • space-between : 여러 줄들 사이에 동일한 간격을 둡니다.
  • space-around : 여러 줄들 주위에 동일한 간격을 둡니다.
  • stretch : 여러 줄들을 컨테이너에 맞도록 늘립니다.
    • default

  • align-items, align-content 비교

    • align-items : 컨테이너 안의 요소들에 대한 세로선 상 정렬(기본적인 정렬)
    • align-content : 여러 줄들 사이의 간격을 지정. 한 줄만 있는 경우 효과 없음.

      align-items, align-content 둘 중 하나만 적용이 됨

  #pond {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
  }

• flex-grow : 컨테이너 크기에 맞추면서 확장되는 비중을 설정

  • 개별 요소에 적용하는 속성
  • 컨테이너에서 남는 공간을 채우면서 개별 요소 크기를 확장시킨다.
  • 속성 값 : 양의 정수
    • 기본 값은 0으로 기본적으로 남는 공간을 채우지 않는다.
    • 속성 값을 1 이상으로 지정해서 남는 공간을 채울 수 있다.

  // 컨테이너에서 남는 공간을 클래스 aaa와 bbb가 1:3 비율로 가져감
  .aaa { flex-grow: 1; }
  .bbb { flex-grow: 3; }

• flex-shrink : 컨테이너 크기에 맞추면서 축소되는 비중을 설정

  • 개별 요소에 적용하는 속성
  • 컨테이너를 초과하는 크기를 비중에 따라 개별 요소 크기를 축소시킨다.
  • 속성 값 : 양의 정수
    • 기본 값은 1로서 기본적으로 동일한 비율로 축소한다.
    • 속성 값을 0으로 지정해서 축소되지 않게 할 수 있다.

  // 컨테이너를 초과하는 크기를 클래스 aaa와 bbb가 1:3 비율로 축소함.
  .aaa { flex-shrink: 1; }
  .bbb { flex-shrink: 3; }

  flex-grow와 flex-shrink 둘은 동시에 설정될 일은 없음.
  컨테이너의 크기보다 내부 요소들이 작거나 클 때 사용하는 것이라,
  두 상황이 양립할 수 없음.

• flex-basis : 개별 요소의 기본 크기를 지정.

  • 개별 요소에 적용하는 속성
  • px, em, % 등의 단위 또는 auto 값을 가질 수 있다.
  • 기본 값 : auto
  • 여기서는 퍼센티지(%)로 설정하는 방법을 정리한다.
    • 컨테이너 크기를 기준으로 퍼센티지(%)로 개별 요소의 크기를 설정
    • 속성 값 : 양의 정수

  // 컨테이너 크기의 10%, 30% 로 클래스 aaa, bbb의 크기를 설정
  .aaa { flex-basis: 10; }
  .bbb { flex-basis: 30; }

• z-index

  • z-index로 Z축 정렬. 숫자가 클 수록 위로 올라옴

  .bbb {
      z-index: 1;
      transform: scale(2);
   }
   /* z-index를 설정 안하면 0이므로, 1만 설정해도 나머지 아이템을 보다 위로 올라온다 */

  

main axis, cross axis

• flex-direction의 속성 값이 row/row-reverse일 때, main-axis는 가로선, cross-axis는 세로선이다.

• flex-direction의 속성 값이 column/column-reverse일 때, main-axis는 세로선, cross-axis는 가로선이다.

• justify-content가 가로선 정렬이라고 했는데, 사실 main축 정렬이다.
  • flex-direction이 row일 때, main축이 가로선이라서 가로선 정렬이라고 하는 것
  • flex-direction이 column이면, justify-content는 세로선 정렬이다.(main축 정렬인 건 동일)
• align-items는 세로선 정렬이라고 했는데, 사실 cross축 정렬이 정확하다.
  • flex-direction이 row일 때, cross축이 세로선이므로 세로선 정렬이라고 하는 것
  • flex-direction이 column이면, align-items는 가로선 정렬이다.(cross축 정렬인 건 동일)