FlexBox의 놀라운 힘

Sep 11, 2025

어떻게

FlexBox 또는 유연한 박스 레이아웃은 웹 디자이너와 개발자가 컨테이너에 요소를 배치, 정렬 및 배포하는 효율적이고 간단한 방법을 제공하는 강력한 CSS 레이아웃 모듈입니다. 우리가 오랫동안 해결하기 위해 고심하고있는 많은 레이아웃 문제를 해결합니다.

FlexBox 기본 사항

가장 기본적인 양식에서 FlexBox는 Flex 컨테이너 (또는 플렉스 부모)와 Flex Items (Flex Ashild)의 두 요소로 구성됩니다. 플렉스 컨테이너는 포함 된 요소입니다 (예 : 이면 ) 디스플레이 속성을 감안할 때 굽힘 ...에 Flex 항목은 다양한 디스플레이 속성을 통해 조작 할 수있는 Flex 컨테이너의 자식 요소입니다.

플렉스 컨테이너 및 플렉스 항목에는 각각 복잡한 레이아웃 범위를 만드는 다양한 방법으로 결합 될 수있는 자신의 속성 범위가 있습니다. 플렉스 컨테이너 안의 항목은 수평 또는 수직으로 배치하고 다양한 방식으로 정렬 및 분포하여 사용 가능한 공간에 맞게 늘어나거나 축소됩니다. 이 모든 옵션을 사용하면 쉽게 반응 형 레이아웃을 만들 수 있습니다.

FlexBox를 사용하는 방법

FlexBox를 사용하려면 먼저 Flex 컨테이너 (Flex 항목을 포함 할 부모 요소)를 만듭니다. 이 예에서는 A를 사용할 것입니다 이면 블록. 우리가 요소를 스타일하기 전에 3 개를 더 추가합시다. 이면 플렉스 컨테이너 내부의 블록을 통해 플렉스 항목으로 작동합니다. 이 시점에서 항목이 쌓일 것입니다.

우리의 아이 Div가 제자리에서 부모 컨테이너의 디스플레이 속성을 설정할 수 있습니다. 굽힘 ...에

 플렉스 컨테이너 {
디스플레이 : 플렉스;
}

레이아웃 방향

레이아웃 방향은 단순히 요소가 자신을 배포 할 방향입니다. 플렉스 컨테이너의 기본 방향은입니다 열 자식 요소를 수평으로 표시합니다. 방향을 설정하여 레이아웃을 수직으로 전환 할 수 있습니다. 기둥 ...에

 플렉스 컨테이너 {
디스플레이 : 플렉스;
플렉스 방향 : 행;
}

플렉스 컨테이너 {
디스플레이 : 플렉스;
플렉스 방향 : 컬럼;
}

플렉스 컨테이너에 설정 한 방향은 '주요'방향이라고합니다. 다른 방향이 선택하지 않은 다른 방향은 '십자가'방향이됩니다. 따라서 기본적으로 주 방향은 수평이고 교차 방향은 수직이 될 것입니다.

FlexBox를 사용하면 레이아웃을 뒤집을 수 있습니다. 역전되면 플렉스 컨테이너의 아이들이 오른쪽에서 왼쪽으로 놓일 것입니다 (방향이있는 경우 열 ) 또는 맨 아래 (방향이있는 경우 기둥 짐마자

 플렉스 컨테이너 {
디스플레이 : 플렉스;
플렉스 방향 : ROW-Reverse;
}

플렉스 컨테이너 {
디스플레이 : 플렉스;
플렉스 방향 : 컬럼 - 역방향;
}

작은 화면에서 레이아웃을 뒤집으려면이 작업을 수행 할 수 있습니다.

예를 들어, 화면 왼쪽에 텍스트와 오른쪽 이미지 (위의 서핑 보드 이미지 참조)를 표시하려는 데스크탑 화면을 사용해 봅시다. 모바일에서 이것은 텍스트 아래 이미지를 이동합니다. 방향을 반전시킴으로써 이미지가 텍스트 위에 나타나는지 확인할 수 있습니다.

정렬 조정

FlexBox의 설정은 또한 내용을 수직 및 수평으로 정렬하기위한 두 가지 방법을 제공합니다. 다음은 플렉스 컨테이너 내의 항목에 대한 가로 정렬 옵션입니다.

플렉스 - 시작 : 레이아웃을 뒤집지 않는 한 행의 시작을 향해 설정된 항목 (왼쪽)

센터 : 행 안에 중심이있는 항목

플렉스 엔드 : 행 끝으로 설정된 항목 (레이아웃을 바꾸지 않는 한 오른쪽).

공간 사이 : 행을 균등하게 배포 한 항목

우주 주위 : 각 요소의 양쪽에 동등한 공간이있는 행을 균등하게 분포 한 항목

그래서 코드는 다음과 같습니다.

 플렉스 컨테이너 {
디스플레이 : 플렉스;
플렉스 방향 : 행;
정렬 내용 : Flex-Start | 플렉스 엔드 | 센터 | 공간 간 | 우주 주변 | 뻗기;
}

다음은 플렉스 컨테이너의 항목에 대한 수직 정렬 옵션입니다.

플렉스 - 시작 : 항목의 맨 위에 정렬 된 항목

센터 : 항목이 열 내에 중앙에 연결됩니다

플렉스 엔드 : 행의 바닥에 정렬 된 항목

뻗기 : 항목의 높이를 가로 질러 아이템이 늘어났습니다

기준선 : 기준선에 정렬 된 항목 (텍스트가 앉아있는 가상의 라인)

코드는 다음과 같습니다.

 플렉스 컨테이너 {
디스플레이 : 플렉스;
플렉스 방향 : 행;
정렬 항목 : Flex-Start | 플렉스 엔드 | 센터 | 기준선 | 뻗기;
}

기본적으로 Flex 컨테이너의 자식은 항상 한 줄에 항상 적합합니다. 이것을 변경하고 싶다면, 당신은 싸다 속성. 이렇게하면 어린이가 공간이 부족한 경우 새 줄을 랩핑 할 수 있습니다.

 플렉스 컨테이너 {
디스플레이 : 플렉스;
플렉스 랩 : 랩;
}

Flex 항목은 또한 자신의 Flex 기반 등록 정보를 얻습니다. 요소가 Flex 컨테이너 안에 배치되면 자동으로 Flex 하위가되며 Flex 기반 CSS 스타일 세트가 부여됩니다. 이 스타일은 크기 조정, 정렬 및 표시 순서를 제어합니다.

플렉스 사이징

Flex 어린이는 사용 가능한 공간을 채우려면 (용기의 레이아웃 방향에 따라) 너비 또는 높이를 변경할 수 있습니다.

WebFlow는 Flex 사이징을위한 세 가지 사전 설정 옵션을 제공합니다. 필요할 경우 축소, 빈 공간을 채우고 축소하지 마십시오. 각 자식 요소는 자신의 설정을 가질 수 있으며, 이는 디자인 옵션을 플레토라 할 수 있습니다.

 Flex Item {
플렉스 - 축소 : & lt; 번호 & gt ;;
플렉스 - 성장 : & lt; 번호 & gt ;;
플렉스 기준 : & lt; 길이 & gt; | 자동;
}

이러한 각 옵션이 수행하는 것을 살펴 보겠습니다.

필요한 경우 수축 : 너비 / 높이 또는 그 콘텐츠를 기반으로 항목을 크기를 조정합니다. 항목이 필요없는 것보다 더 크지는 않지만 오버플로를 방지하기 위해 최소 크기로 축소 될 수 있습니다.
빈 공간 채우기 : 항목이 확장되도록 확장하여 모든 사용 가능한 모든 공간을 부모 안에 채울 수 있습니다. Flex 컨테이너의 모든 항목을 설정하면 동일한 양의 빈 공간을 차지하도록 확장됩니다.
축소하지 마십시오. 너비 / 높이 또는 그 콘텐츠를 기반으로 항목을 크기로 설정하지만 오버플로가 발생할 경우에도 축소 할 수 없습니다.

Flex Items는 부모 Flex 컨테이너가 설정 한 기본 정렬을 무시하는 자체 정렬 설정을 가질 수 있습니다. 이 정렬은 이전에 설명한대로 작동합니다.

 Flex Item {
디스플레이 : 플렉스;
플렉스 방향 : 행;
정렬 항목 : Flex-Start | 플렉스 엔드 | 센터 | 기준선 | 뻗기;
}

기본적으로 Flex Items는 소스 코드에 나타나는 순서와 동일한 순서로 표시됩니다. FlexBox를 사용하면 요소가 원하는 순서로 표시되는 요소를 표시하도록이 동작을 무시할 수 있습니다.

여기에서 사용할 수있는 네 가지 주요 옵션은 다음과 같습니다.

자동으로 : 소스에있는 것처럼 항목을 주문하는 기본값
먼저 : Flex 컨테이너에 항목이 처음 나타납니다
마지막 : 항목이 Flex 컨테이너에 마지막으로 나타납니다
커스텀 : 항목이 표시 될 주문을 사용자 정의 할 수 있습니다.

사용자 정의 주문은 Flex 컨테이너 안에 표시되는 순서를 지정하는 숫자로 정의 할 수 있습니다.

 Flex Item {
주문 : & lt; 정수 & gt ;;
}

왜 내가 그것을 사용해야합니까?

네가 물어 봐도 기뻐. FlexBox를 사용하면 이전 CSS 레이아웃 모듈을 사용하여 작성하는 데 한 번 매우 어려운 (불가능 함) 쉽게 반응 형 레이아웃을 쉽게 만들 수 있습니다.

아래 이미지의 예를 살펴보십시오. 그 중 많은 부분은 이미 웹에서 보았을 것입니다. 거의 모든 것이 상당한 양의 CSS (특히 다른 화면 크기에 걸쳐)를 취할 것이지만 FlexBox를 사용하여 달성하기 위해 몇 가지 간단한 라인 만 사용합니다. 이 예제를 조치로 보려면 방문하십시오 flexbox.webflow.com. ...에

FlexBox의 놀라운 힘

FlexBox 기본 사항

FlexBox를 사용하는 방법

레이아웃 방향

정렬 조정

플렉스 사이징

왜 내가 그것을 사용해야합니까?

어떻게 - 가장 인기있는 기사

8 가지 놀라운 새로운 그래픽 디자인 자습서

현지 개발 환경을 설정하는 방법

Photoshop에서 로고를 만드는 방법

5 분 이내에 그림을 그립니다

아이들을 위해 애니메이션을 배우기

Photoshop의 대기 초상화를 칠하는 방법

오일에서 습식 습식 페인트

브랜딩 팬은 브랜드의 목소리를 어떻게 못냅니다

카테고리