Flexbox - 주요 특징, 속성, 사용방법

 

 

 

Flexbox

 

유연한 박스 모델을 생성하기 위한 레이아웃 시스템입니다.

Flexbox를 사용하면 요소들을 효율적으로 정렬하고 배치할 수 있으며, 브라우저의 크기나 화면 크기에 따라 유동적으로 대응할 수 있습니다.

 

 

Flexbox 주요 특징

 

유연한 박스 모델

Flexbox를 사용하면 요소의 크기를 유연하게 조정할 수 있습니다.

 

단일 축 정렬

Flexbox는 주 축을 기준으로 요소들을 정렬합니다. 주 축은 flex-direction 속성을 통해 지정할 수 있습니다.

 

요소 간 간격 조정

각 요소 사이의 간격을 조절할 수 있습니다.

 

요소의 순서 변경

Flexbox를 사용하면 요소의 순서를 변경할 수 있습니다.

 

반응형 디자인

Flexbox는 화면 크기에 따라 요소들을 유연하게 배치할 수 있어 반응형 디자인에 유용합니다.

 

 

Flexbox 속성

 

컨테이너 요소에 적용하는 속성:

display: flex;: Flexbox 레이아웃을 사용하도록 요소를 설정합니다.

 

중심축(메인 축)에 따른 정렬:

justify-content: 주 축(가로 방향)을 기준으로 아이템들을 정렬합니다.

 

교차축(크로스 축)에 따른 정렬:

align-items: 교차 축(세로 방향)을 기준으로 아이템들을 정렬합니다.

 

아이템의 줄 바꿈과 순서:

flex-wrap: 아이템 요소가 한 줄에 모두 표시되지 않고, 부모 요소의 너비를 초과할 때 줄을 바꿉니다.

flex-direction: 아이템들의 배치 방향을 결정합니다.

 

축 사이의 간격 조정:

align-content: 여러 줄의 아이템들 간의 간격을 조정합니다.

 

아이템에 적용하는 속성:

align-self: 특정 아이템의 정렬을 따로 설정합니다.

order: 아이템의 순서를 조정합니다.

 

 

Flexbox 사용방법

 

Flexbox는 주로 요소의 부모 컨테이너에 display: flex; 속성을 적용하여 사용합니다.

그리고 자식 요소에 대해 Flexbox 속성을 지정하여 정렬 및 배치를 조정합니다.

아래는 Flexbox를 사용하여 요소들을 가로로 정렬하는 예시입니다:

.container {
  display: flex; /* 부모 컨테이너를 Flexbox로 설정 */
}

.item {
  /* 자식 요소의 Flexbox 속성 설정 */
}

 

Flexbox는 다양한 레이아웃 디자인에 유용하게 사용될 수 있으며, 웹 개발에서 널리 사용되고 있는 기술 중 하나입니다.