[2023.03.08] 11. display: flex

 

🔍display 속성 중 flex에 대해 정리.

 

flex

• flexible: 유연한, 신축성있는, 구부러지는
• 자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법을 설정하는 속성
• 부모 요소를 flex-container 자식 요소를 flex-item.
• 주로 1차원적 레이아웃(x축 / y축)을 위해 사용

 

[출처 : 위니브(Weniv)]

 

flex-container 속성

아래 속성들은 flex-container(부모 요소)에서 사용하는 속성이다.

 

flex-direction

• 컨테이너 내 아이템을 배치할 방향 지정
• row: 기본값. 왼쪽에서 오른쪽(주축이 행 방향)
• column: 위에서 아래 방향(주축이 열 방향)
• row-reverse: 오른쪽에서 왼쪽
• 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인 상태에서 사용

 

gap

• 아이템 사이의 간격 설정

 

flex-wrap

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

 

 

flex-flow

• flex-direction flex-wrap 단축 속성

flex-flow: column wrap;

 

 

flex-item 속성

아래 속성들은 flex-item(자식 요소)에서 사용하는 속성이다.

 

flex-basis

• flex-item의 초기 크기 설정
• width, height와 다른 점
  
  • 축의 방향에 따라 달라짐
  • 내부 콘텐츠에 따라 유연한 크기를 가짐
• auto: 기본값
• row일 경우 width 값 무시, column일 경우 height 값 무시
• px, em 등의 단위값 사용. 0 외에 다른 상수 사용 X

 

flex-grow

• 아이템이 컨테이너 내부에서 할당할 수 있는 공간의 정도를 지정
• 형제 요소인 아이템들이 모두 같은 값이라면, 내부에서 동일한 공간을 할당받는다.
• 0으로 설정하면 늘어나지 않는다.
• flex-basis: 0을 주게되면 전체 공간을 분할.

 

flex-shrink

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

 

align-self

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

 

order

• flex-item들의 순서를 수의 크기로 결정, 수가 작을수록 우선순위
• 음수 사용 가능

💡논리적인 마크업 순서를 위해 사용가능

[출처 : 위니브(Weniv)]

flex

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

flex: 1 1 100px;