[기초]CSS 플렉스박스(FlexBox)

Flexbox(유연한 박스 레이아웃 모듈)는 복잡한 레이아웃을 간편하게 구성할 수 있도록 설계된 1차원 레이아웃 모델입니다. Flexbox는 요소를 정렬하고 공간을 분배하며, 다양한 화면 크기와 장치에서도 유연하게 레이아웃을 조정할 수 있습니다.

 

Flexbox의 기본 구성 요소

1. Flex 컨테이너: Flexbox 레이아웃의 부모 요소로, 자식 요소들을 Flex 아이템으로 취급합니다.
2. Flex 아이템: Flex 컨테이너 내의 직속 자식 요소들입니다.

 

Flex 컨테이너 속성

1. display: Flex 컨테이너를 정의합니다.

• 값: flex | inline-flex

.container {
  display: flex;
}

 

 

2. flex-direction: Flex 아이템의 주 축(main axis)을 설정합니다.

• 값: row | row-reverse | column | column-reverse

.container {
  flex-direction: row; /* 기본값 */
}

 

 

3. flex-wrap: Flex 아이템들이 컨테이너 내에서 여러 줄로 나뉠지 여부를 설정합니다.

• 값: nowrap | wrap | wrap-reverse

.container {
  flex-wrap: wrap;
}

 

 

4. flex-flow: flex-direction과 flex-wrap의 단축 속성입니다.

• 값 : row nowrap

.container {
  flex-flow: row nowrap; /* 기본 값 */
}

 

 

5. justify-content: 주 축(main axis)을 따라 Flex 아이템들을 정렬합니다.

• 값: flex-start | flex-end | center | space-between | space-around | space-evenly

.container {
  justify-content: center;
}

 

 

6. align-items: 자식 요소들 전체에 적용되며, 교차 축(cross axis)을 따라 Flex 아이템들을 정렬합니다.

• 값: stretch | flex-start | flex-end | center | baseline

.container {
  align-items: center;
}

 

 

7. align-content: 여러 줄로 나뉜 Flex 아이템들이 있을 경우에 교차 축(cross axis)에서 줄 간의 공간을 정렬합니다. 단일 줄일 경우에는 적용되지 않습니다. 즉, 줄 사이의 간격을 조정하는 데 사용됩니다.

• 값: stretch | flex-start | flex-end | center | space-between | space-around

.container {
  align-content: space-between;
}

 

---

Flex 아이템 속성

1. order: Flex 아이템의 순서를 변경합니다.

• 기본 값: 0

.item {
  order: 2;
}

 

 

2. flex-grow: Flex 아이템의 성장 비율을 설정합니다. 남은 공간을 차지할 비율을 결정합니다.

• 기본 값: 0

.item {
  flex-grow: 1;
}

 

 

3. flex-shrink: Flex 아이템의 축소비율을 설정합니다. 공간이 부족할 때 축소되는 비율을 결정합니다.

• 기본 값: 1

.item {
  flex-shrink: 1;
}

 

 

4. flex-basis: Flex 아이템의 기본 크기를 설정합니다. auto, px, % 등으로 지정할 수 있습니다.

• 기본 값: auto

.item {
  flex-basis: 100px;
}

 

 

5. flex: flex-grow, flex-shrink, flex-basis를 단축으로 설정합니다.

.item {
  flex: 1 0 100px; /* flex-grow flex-shrink flex-basis */
}

 

 

6. align-self: 개별 아이템 한 개에 적용되며 특정 Flex 아이템의 교차 축 정렬을 설정합니다.

• 값: auto | stretch | flex-start | flex-end | center | baseline

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