CSS Flexbox 개념과 속성

CSS Flexbox(유연한 박스 레이아웃)은 웹 페이지의 레이아웃을 유연하게 설계하기 위한 도구로, 요소 간의 정렬 및 분포를 쉽게 다룰 수 있도록 합니다. Flexbox는 주로 한 행 또는 한 열 안에서 요소들을 배치하고 정렬하는 데 사용됩니다.

Flexbox의 주요 개념과 속성들은 다음과 같습니다.

 

- Container (컨테이너)

    Flexbox의 레이아웃을 적용할 부모 요소를 말합니다. 이를 "플렉스 컨테이너"라고 부릅니다.

//cssCopy code

.flex-container
{ 
	display: flex; /* Flexbox를 활성화합니다. */
}

반응형

- Items (플렉스 아이템)

    플렉스 컨테이너 내에 있는 자식 요소들을 말합니다.

//cssCopy code
.flex-item
{ 
	/* 플렉스 아이템에 적용할 스타일을 지정합니다. */
}

 

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

   플렉스 방향에 따라 주 축과 교차 축이 결정됩니다. flex-direction 속성으로 주 축을 지정할 수 있습니다. 디폴트 값은 row로 수평 방향입니다.

//cssCopy code
.flex-container
{ 
	flex-direction: row; /* 주 축 방향을 수평으로 설정합니다. */
}

반응형

- 정렬 (Alignment)

    justify-content 속성은 주 축을 따라 플렉스 아이템을 정렬하는 데 사용되고, align-items 속성은 교차 축을 따라 정렬합니다.

// cssCopy code
.flex-container
{ 
	justify-content: space-between; /* 주 축을 따라 아이템을 양쪽 끝으로 분포시킵니다. */
	align-items: center; /* 교차 축을 따라 아이템을 가운데 정렬합니다. */
}

 

- 순서 (Order)

    order 속성을 사용하여 플렉스 아이템의 순서를 변경할 수 있습니다.

//cssCopy code
.flex-item
{ 
	order: 2; /* 두 번째로 표시될 플렉스 아이템으로 순서를 변경합니다. */
}

반응형

- 자동 마진 (Auto Margin)

    margin 속성을 사용하여 플렉스 아이템 간의 간격을 조절할 수 있습니다.

//cssCopy code
.flex-item
{ 
	margin-right: 10px; /* 우측 마진을 추가하여 아이템 간 간격 조절 */
}

 

Flexbox는 반응형 및 동적인 레이아웃을 구축하는 데 매우 효과적이며, 복잡한 레이아웃을 간단하게 만들 수 있도록 도와줍니다. 그러나 Flexbox를 완전히 이해하려면 속성 간의 상호 작용과 여러 설정을 실험해 보면서 익숙해지는 것이 중요합니다.