CSS - Flex

✏️ Flex 함수

• display
  • flex : 본인은 display : block 처럼 작동
    자식들은 flex 방식으로 다루겠다는 의미
• justify-content:
  • flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
  • flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
  • center: 요소들을 컨테이너의 가운데로 정렬합니다.
  • space-between: 요소들 사이에 동일한 간격을 둡니다.
  • space-around: 요소들 주위에 동일한 간격을 둡니다.
• align-items
  • flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
  • flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
  • center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
  • baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
  • stretch: 요소들을 컨테이너에 맞도록 늘립니다.
• flex-direction
  • row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
  • row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
  • column: 요소들을 위에서 아래로 정렬합니다.
  • column-reverse: 요소들을 아래에서 위로 정렬합니다.
• order

  • 특정 item 의 순서를 바꿀 수 있음

  • yellow 를 3번째로 보내는 코드

  • 음수도 사용할 수 있다.

    #pond {
      display: flex;
    }
    
    .yellow {
    order: 3;
    }

• align-self
  • Class 에 속한 item 중 특정 item 만 별도로 적용시키는 로직
  • align-items 와 같은 속성을 갖고있따.
• flex-wrap
  • nowrap: 모든 요소들을 한 줄에 정렬합니다.
  • wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
  • wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
• flex-flow: column wrap
• align-content
  • flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
  • flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
  • center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
  • space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
  • space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
  • stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.
• display
  • block : 너비 최대, 수직 배열
  • inline-block : 너비 최소, 수평 배열
• flax-grow: {int}
  • 남는 공간을 int 비율에 맞게 체우는 기능
• flax-shirnk: 1
  • 브라우저의 크키가 줄어들거나 커저도 크기를 그대로 유지한다.

✏️ Position

• static : 부모 tag 에 고정적으로 위치해야 함
• absolute : 부모 tag 내에서 자유롭게 위치할 수 있음
  • top, left, right : ~% 로 조절할 수 있음