CSS Flexbox 속성들

1.1 justify-content (가로 축 정렬)

이 속성은 Flexbox의 자식 요소들을 가로 방향으로 어떻게 배치할지 결정합니다.

 

.container {
  display: flex;
  justify-content: center;
}

값:

• flex-start: 왼쪽 정렬 (기본값)
• center: 가운데 정렬
• flex-end: 오른쪽 정렬
• space-between: 자식 요소들 사이에 균등한 간격을 주되, 양 끝은 부모 요소에 붙음
• space-around: 자식 요소들 사이에 균등한 간격을 주되, 양 끝도 동일한 간격을 가짐
• space-evenly: 자식 요소들 사이와 부모의 양 끝까지 균등한 간격을 줌

 

 

1.2 align-items (세로 축 정렬)

.container {
  display: flex;
  align-items: center;
}

값:

• flex-start: 부모 요소의 위쪽에 정렬
• center: 부모 요소의 세로 중앙에 정렬
• flex-end: 부모 요소의 아래쪽에 정렬
• stretch: 자식 요소의 크기를 부모의 높이에 맞게 늘림 (자식의 높이가 설정되어 있지 않은 경우)
• baseline: 자식 요소의 텍스트 기준선에 맞춰 정렬

 

 

1.3 flex-direction (배치 방향 설정)

자식 요소들이 어느 방향으로 배치될지 설정합니다.

.container {
  display: flex;
  flex-direction: row;
}

값:

• row: 자식 요소들을 가로로 배치 (기본값)
• row-reverse: 자식 요소들을 가로로, 오른쪽에서 왼쪽으로 배치
• column: 자식 요소들을 세로로 배치
• column-reverse: 자식 요소들을 세로로, 아래에서 위로 배치

 

 

 

1.4 align-self (개별 자식 요소의 세로 정렬)

align-items는 부모의 모든 자식 요소에 적용되지만, 개별 자식 요소에만 다른 정렬을 적용하고 싶다면 align-self를 사용합니다.

.item {
  align-self: flex-start;  /* 해당 자식 요소만 위쪽에 정렬 */
}

값:

• flex-start: 위쪽 정렬
• center: 세로 중앙 정렬
• flex-end: 아래쪽 정렬
• stretch: 부모의 크기에 맞춰 늘림

 

5. Positioning (요소 위치 관련 속성)

5.1 position (위치 설정)

요소의 위치를 지정하는 방식입니다.

.element {
  position: absolute;  /* 부모 요소 기준으로 위치 */
  top: 20px;           /* 부모 요소 위에서 20px 떨어진 위치 */
  left: 30px;          /* 부모 요소 왼쪽에서 30px 떨어진 위치 */
}

• 값:
  • static: 기본 위치 (자동 배치)
  • relative: 현재 위치에서 상대적인 위치
  • absolute: 부모 요소를 기준으로 절대적 위치
  • fixed: 화면을 기준으로 고정된 위치