완벽한 Flexbox 레이아웃 만들기

컨테이너 속성

display

flex-direction

flex-wrap

justify-content

align-items

align-content

항목 속성

Items

3 items

선택한 항목

flex-grow

flex-shrink

flex-basis

order

align-self

Preview

Item 1

Item 2

Item 3

.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; }  .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

;
  ;Item 1;
  ;Item 2;
  ;Item 3;
;

생성된 CSS 코드

실제 사례

탐색 모음

Logo

Home

Products

About

Contact

왼쪽에는 로고가 있고, 가운데에는 메뉴 항목이, 오른쪽에는 카트 아이콘이 있는 일반적인 탐색 모음 레이아웃입니다.

Card Grid

카드 제목

카드 설명 텍스트는 여기에 있습니다.

카드 제목

카드 설명 텍스트는 여기에 있습니다.

카드 제목

카드 설명 텍스트는 여기에 있습니다.

flexbox 속성을 사용하여 다양한 화면 크기에 맞게 조정되는 반응형 카드 그리드입니다.

아티클 레이아웃

기사 제목

게시일 2023년 1월 1일 · 5분 분량의 글

기사 내용은 여기에. 이것은 간단한 요약일 수도 있고 전체 기사 텍스트일 수도 있습니다. Flexbox는 시각적으로 매력적인 방식으로 이미지와 텍스트를 정렬하는 데 도움이 됩니다.

왼쪽에는 이미지가, 오른쪽에는 텍스트 콘텐츠가 있는 일반적인 아티클 레이아웃으로, 모바일 장치에 쌓여 있습니다.

대시보드 레이아웃

Header

Sidebar

주요 내용

Footer

머리글, 사이드바, 기본 콘텐츠 영역 및 바닥글이 있는 대시보드 레이아웃은 가로 및 세로 정렬을 위해 flexbox를 사용합니다.

Flexbox 기초

플렉스박스란 무엇인가요?

일반적으로 Flexbox로 알려진 Flexible Box Layout은 크기를 알 수 없거나 동적인 경우에도 컨테이너의 항목 간에 공간을 분배하고 정렬하는 효율적인 방법을 제공하는 CSS3 레이아웃 모델입니다.

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).

핵심 개념:Flexbox는 두 가지 주요 개념을 소개합니다.플렉스 컨테이너 and the 플렉스 항목. 컨테이너는 부모 요소이고 항목은 직계 자식입니다.

주축 vs 교차축

플렉스박스 레이아웃은 두 개의 축을 기반으로 합니다.main axis and the 크로스 축.

주축:플렉스 항목이 배치되는 기본 축입니다. 에 의해 정의됨flex-direction.
크로스 축선:주축에 수직인 축입니다. 그 방향은 주축 방향에 따라 다릅니다.

주축 →

← 크로스 축

Start

Main

End

컨테이너 속성

Property	Description
`display`	플렉스 컨테이너를 정의합니다. 지정된 값에 따라 inline 또는 block입니다.
`flex-direction`	main axis를 설정하여 flex item이 flex container에 배치되는 방향을 정의합니다.
`flex-wrap`	기본적으로 플렉스 항목은 모두 한 줄에 맞추려고 합니다. 이를 변경하고 이 속성을 사용하여 필요에 따라 항목을 래핑하도록 할 수 있습니다.
`justify-content`	flex item을 flex container의 현재 줄의 주 축을 따라 정렬합니다.
`align-items`	플렉스 컨테이너의 현재 라인의 교차 축을 따라 플렉스 항목을 정렬합니다.
`align-content`	교차 축에 추가 공간이 있을 때 플렉스 컨테이너의 선을 정렬합니다.

항목 속성

Property	Description
`order`	기본적으로 플렉스 항목은 소스 순서로 배치됩니다. 그러나`order`속성은 Flex 컨테이너에 표시되는 순서를 제어합니다.
`flex-grow`	필요한 경우 flex item이 증가할 수 있는 기능을 정의합니다. 비율로 사용되는 단위 없는 값을 허용합니다.
`flex-shrink`	필요한 경우 flex item이 축소될 수 있는 기능을 정의합니다.
`flex-basis`	사용 가능한 공간이 flex factor에 따라 분배되기 전에 flex item의 초기 크기를 정의합니다.
`align-self`	기본 정렬(또는 에 의해 지정된 정렬을 허용합니다.`align-items`)를 사용하여 개별 Flex 항목에 대해 재정의할 수 있습니다.