CSS FlexBox 이해 - 시각적 예제 포함.

Flexbox를 사용하면 상자의 정렬, 방향, 순서 및 크기를 완벽하게 제어할 수 있습니다. 최신 웹 페이지 레이아웃을 매우 쉽게 구축할 수 있습니다.

이 게시물에서는 가장 많이 사용되는 Flexbox 속성을 살펴보겠습니다.

컨테이너 및 항목

"Flex"는 CSS 표시 속성의 값 중 하나입니다.

.container {
  display: flex;
}

플렉스 컨테이너: 표시 속성이 플렉스로 설정된 요소가 플렉스 컨테이너가 됩니다.

플렉스 항목: 컨테이너의 모든 직계 자식이 플렉스 항목이 됩니다.

플렉스 컨테이너 속성

1. 콘텐츠 정렬: 항목의 수평 정렬.

Justify-Content의 값.

flex-start: 행 시작 시 항목 정렬

flex-end: 행 끝에서 항목 정렬

center: 행 중앙에 항목 정렬

space-between: 플렉스 항목 사이의 공간

space-around: 플렉스 항목 주변의 공간

2. 항목 정렬: 항목을 세로로 정렬합니다.

Align-Items의 값은 justify-content의 값과 정확히 동일합니다.

Align-Items는 항목을 세로로 정렬하고 Justify-Content는 항목을 가로로 정렬한다는 차이점이 있습니다.

3. Flex Wrap: 그리드 레이아웃 생성
플렉스 아이템의 행 너비가 플렉스 컨테이너의 너비를 초과하면 플렉스 아이템이 컨테이너 가장자리에서 흘러나옵니다.

Flex Wrap에는 두 가지 값이 있습니다.

랩 없음: 기본값입니다. 플렉스 항목은 페이지 밖으로 흐릅니다.

wrap: 플렉스 항목을 다음 줄에 래핑합니다.

4. 플렉스 방향: 행 또는 열
기본적으로 플렉스 컨테이너는 플렉스 항목을 일렬로 정렬합니다. flex-direction 속성으로 플렉스 컨테이너 방향을 변경할 수 있습니다.

네 가지 값:

열

row-reverse: 행을 뒤집습니다

.

칼럼

column-reverse: 열을 뒤집습니다

.

Justify-Content and Align-Items change their role when flex-direction is set to the column.

Flex Items 속성: 자체 정렬

Align-Self는 align-items와 비슷하지만 유일한 차이점은 align-items는 flex-container에 적용되고 align-self는 개별 flex-item에 적용된다는 것입니다.

플렉스 스타트

플렉스 엔드

센터

스트레치

이 게시물이 마음에 드셨다면 제 8020 Newsletter에 가입하는 것을 고려해 보십시오. 여기에서 귀하의 기술을 구축하는 데 대한 장대한 주간 콘텐츠를 공유합니다.

읽어주셔서 감사합니다.