CSS #12 (flexbox)

플렉스 박스 레이아웃 (Flexbox Layout) : 복잡한 레이아웃을 쉽게 만들 수 있는 CSS3의 레이아웃 모델

- 주로 1차원 레이아웃(가로 또는 세로)에서 요소들을 유동적으로 배치하고 정렬하는 데 사용.

- 항목들의 크기, 간격, 정렬을 쉽게 조정할 수 있음.

- 기존의 float 이나 position 을 사용한 레이아웃보다 훨씬 더 유연하고 효율적

 

 

• 부모 요소(컨테이너)와 자식 요소(항목)로 나뉨.
• 부모 요소에 display: flex를 설정, 자식 요소에 다양한 정렬 및 크기 조정을 설정 가능

 

display: flex : 부모 요소에 display: flex를 설정하면, 자식 요소들이 플렉스 항목이 되어 플렉스 컨테이너로 작동

.container {
    display: flex;
}

.container 요소의 자식들이 플렉스 항목이 되어 가로 방향으로 나열

 

 

 

주축과 교차축 (Main Axis and Cross Axis)

- 주축(Main Axis): 플렉스 항목들이 기본적으로 배치되는 방향. flex-direction에 따라 가로(row) 또는 세로(column)로 배치

- 교차축(Cross Axis): 주축과 수직인 축으로, 항목들이 교차축 방향으로 배치.

 

 

flex-direction : 플렉스 항목들의 배치 방향을 정의

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

.container 의 자식들이 세로 방향으로 배치

 

 

flex-wrap : 플렉스 항목들이 한 줄에 모두 배치될 수 없을 때, 항목들을 다음 줄로 넘겨줄지 여부를 결정.

.container {
    display: flex;
    flex-wrap: wrap;
}

항목들이 여러 줄로 배치

 

 

 

justify-content : 주축(가로 또는 세로) 방향으로 플렉스 항목들을 정렬하는 속성

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

플렉스 항목들이 수평으로 중앙에 정렬

 

 

 

 

align-items : 교차축(세로 또는 가로) 방향으로 플렉스 항목들을 정렬하는 데 사용.

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

플렉스 항목들이 세로로 중앙에 정렬

 

 

 

align-self : 개별 플렉스 항목에 대해 교차축 방향으로 정렬을 다르게 설정할 수 있게 함.

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

개별 항목이 교차축 끝 위치에 정렬

 

 

• flex-grow: 항목이 사용할 수 있는 공간을 얼마나 확장할지 설정
• flex-shrink: 항목이 공간이 부족할 때 얼마나 줄어들지 설정
• flex-basis: 항목의 기본 크기를 설정

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

flex-grow 가 1로 설정되어 있어, 요소가 남은 공간을 차지하도록 확장

 

 

 

연습 문제

 

See the Pen flexbox by Cheolho Jang (@chiro-J) on CodePen.

 

- 플렉스 컨테이너를 사용하여 3개의 항목을 수평으로 정렬하고, 항목들 사이에 균등한 공간을 배분

 

 

 

 

요약

1. 플렉스 박스 레이아웃:
   • display: flex 를 사용하여 부모 요소를 플렉스 컨테이너로 설정하고, 자식 요소는 플렉스 항목이 됩니다.
   • flex-direction 을 사용하여 요소들의 배치 방향을 설정합니다. (가로 또는 세로)
2. 플렉스 박스 항목 배치를 위한 속성들:
   • justify-content: 항목들을 주축 방향으로 정렬합니다.
   • align-items: 항목들을 교차축 방향으로 정렬합니다.
   • flex-grow, flex-shrink, flex-basis 등을 사용하여 플렉스 항목의 크기와 확장/축소 동작을 설정합니다.