[CSS] flex 사용하기

flex-container에 사용하는 속성

• display:flex
• 부모요소=flex-container 자식요소=flex-item
• 자식 요소들을 정렬(크기 키우기 or 줄이기)하는 방법
• x축 혹은 y축 사용

[해당 이미지 참고]

flex-direction

• 컨테이너 내 아이템 배치할 때 주축 및 방향 결정
• row: 기본값, 왼쪽->오른쪽
• column:위에서 아래 방향
• [row or column]-reverse: 반대 방향

justify-content

• 주축을 기준으로 배열의 위치 조절, 아이템 간의 간격 조절
• flex-start: 주축 시작 위치에 배치
• flex-end: 주축 끝 위치에 배치
• center: 주축 가운데 배치
• space-between: 주축을 일정한 비율로 나눠 배치
• space-around: 양방향 공간이 있다. 일정한 비율로 배치됨
• space-evenly:공백까지 일정 비율로 배치됨

align-items, align-content

• align-items: 교차 축을 기준으로 정렬
• align-content: 컨테이너의 교차 축의 아이템들이 여러 줄일 때
  • flex-wrap:wrap인 상태에서 사용해야한다

flex-wrap

• 한 줄에 배치되게 할 것인지, 가능한 영역 내에서 여러 행으로 나누어 표현할 것인지

flex-flow

• flex-direction flex-wrap단축 속성

flex-flow: row wrap;

gap

• 아이템 간격 설정

---

flex-item에 사용하는 속성

flex-basis

• flex-item의 초기 크기 설정
• auto 기본값
• flex-basis값이 적용되어 있다면 row일 경우 width값 무시, column일 경우 height값 무시

flex-grow

• 아이템이 컨테이너 내부에서 할당할 수 있는 공간의 정도
• 형제 요소가 모두 같은 값을 가지면 동일한 공간을 할당 받음
• 0을 준다면 늘어나지 않는다.
• flex-grow:2(2이상의 수) -> 특정한 하나의 자식에게만 다른 자식 요소보다 두배의 여백 공간을 할당 받는다. 만약 자식 요소들의 컨텐츠 크기가 존재한다면 그 컨텐츠의 넓이에 따라 할당받는 값이 달라진다.
• 쉽게 얘기하면 grow는 flex-basis보다 커지게 하라는 속성

💡 flex-basis:0을 주게되면 여백 공간이 아니라 전체 공간을 분할한다.

flex-shrink

• 아이템의 크기를 고정하거나 축소할 때 사용
• 0을 주게되면 줄어들지 않는다.

align-self

• 부모의 align-items속성을 덮어 flex-item에게 개별적인 속성을 부여한다.

  • 기본값 stretch

  flex

• flex-grow flex-shrink flex-basis 단축 속성

  flex:1 1 100px;

출처:위니브