Flexbox로 CSS 전용 스마트 레이아웃을 구축하는 방법

게시 됨: 2022-03-11

Flexible box, 줄여서 Flexbox는 새롭고 뛰어난 레이아웃 시스템을 제공하기 위해 2009년에 도입된 CSS의 속성 집합입니다. Flexbox 모듈은 CSS의 세 번째 버전(CSS3)의 일부로 식별됩니다.

box-shadow , border-radius , background gradients 등과 같은 CSS3의 많은 새로운 속성을 이미 사용하고 있을 것입니다. 그러나 Flexbox는 아직 널리 보급되지 않았습니다. 이는 수년 동안 겪었던 모든 주요 변경 때문이거나 Internet Explorer 10에서 부분적으로만 지원되기 때문일 수 있습니다. 속성으로 이동합니다.

그것은 매우 강력하고 이전에는 꿈만 꿀 수 있었던 레이아웃을 달성하기 위해 광범위한 옵션을 제공합니다.

이 기사에서는 Flexbox의 기본 사항과 Flexbox를 사용하여 복잡한 CSS 해킹 또는 JavaScript가 필요한 멋진 레이아웃을 구현하는 방법을 안내합니다.

왜 Flexbox를 사용합니까?

기본적으로 HTML 블록 수준 요소는 스택되므로 한 행에 정렬하려면 float 와 같은 CSS 속성에 의존하거나 table-ish 또는 inline-block 설정으로 display 속성을 조작해야 합니다.

float (왼쪽 또는 오른쪽)을 사용하기로 선택한 경우 마지막 부동 요소까지 밀어넣기 위해 특정 지점에서 래퍼를 지워야 합니다. 그러나 float를 사용하면 요소를 수평으로 구성하는 것으로 제한됩니다.

또는 display 속성을 조작하여 원하는 레이아웃을 얻을 수 있습니다. 그러나 이것은 지루한 것은 말할 것도 없고 기껏해야 엉성하게 느껴지고 종종 브라우저 전체에서 일관되게 렌더링되지 않는 상당히 취약한 레이아웃을 초래합니다. 이 접근 방식은 다양한 크기의 여러 장치를 대상으로 하는 경우 특히 효과적이지 않습니다. 이는 오늘날 거의 항상 그렇습니다.

플렉스박스를 입력하세요!

상위 요소에 간단한 규칙을 적용하면 모든 하위 요소의 레이아웃 동작을 쉽게 제어할 수 있습니다.

Flexbox를 사용하여 다음을 수행할 수 있습니다.

Flexbox 부모 내부의 요소 순서를 반대로 합니다.
열에 자식 요소를 래핑합니다(열 수는 자식 및 부모 높이에 따라 다를 수 있음).
뷰포트 크기가 변경되는 동안 요소가 증가하거나 축소되는 비율을 지정합니다.
지정된 너비 단위 유형(상대 또는 절대)에 관계없이 요소를 축소할 수 있는지 여부를 제어합니다.
CSS를 사용하여 요소의 순서를 변경합니다(미디어 쿼리와 결합하면 흐름에서 무한한 가능성을 찾을 수 있습니다).
주변의 공간 또는 그 사이의 공간으로 등거리가 되도록 요소의 복잡한 분포를 생성합니다.
다르게 흐르는 "배신" 요소를 생성합니다(모든 사람은 왼쪽으로, 하나는 오른쪽으로, 위쪽/아래쪽… 그것은 당신의 소명입니다).
그리고 가장 중요한 것은 clear-fix 핵을 영원히 피하는 것입니다!

Flexbox가 처음에는 어려울 수 있다는 것을 이해합니다. 상호 의존성이 있는 5개보다 관련 없는 10개의 CSS 속성을 배우는 것이 더 쉽다고 생각합니다. 그러나 현재 CSS 기술과 이 기사의 약간의 도움을 받으면 새로운 CSS 세계로 자신을 시작할 수 있습니다.

Flexbox의 기본

표시하다

display 는 CSS에서 가장 기본적인 속성 중 하나이며 flex wrapper를 정의하는 데 사용되기 때문에 Flexbox의 컨텍스트에서 매우 중요합니다.

flex 및 inline-flex 의 두 가지 가능한 플렉스 래퍼 값이 있습니다.

둘의 차이점은 display: flex 래퍼는 블록 요소처럼 작동하는 반면 display: inline-flex 래퍼는 인라인 블록처럼 작동한다는 것입니다. 또한 자식을 포함할 공간이 충분하지 않으면 inline-flex 요소가 커집니다. 그러나 그 차이점을 제외하고는 둘의 행동은 동일할 것입니다.

아래 샘플 코드를 시도하고 inline-flex가 활성화되고... 스크롤할 때 뷰포트 너비를 줄이십시오.

CodePen에서 DD(@Diegue)의 Pen Flexbox @Toptal - Parent - `display` 속성을 참조하세요.

 .wrapper { display: flex || inline-flex; }

플렉스 방향

이제 첫 번째 샘플을 보았으므로 기본 동작이 단순히 요소의 행을 만드는 것임을 추론할 수 있습니다. 하지만 더 있습니다:

row (기본값): 요소를 왼쪽에서 오른쪽으로 정렬합니다(하지만 RTL이 설정되어 있으면 뒤로 정렬됨).
row-reverse: 행 배치에서 요소의 순서를 반대로 합니다.
column: 위에서 아래로 요소를 정렬합니다.
column-reverse: 열 배치에서 요소의 순서를 반대로 합니다.

힌트: column 및 column-reverse 값을 사용하여 축을 바꿀 수 있으므로 가로 축에 영향을 주는 속성이 대신 세로 축에 영향을 줍니다.

CodePen에서 DD(@Diegue)의 Pen Flexbox @Toptal - Parent - `flex-direction` 속성을 참조하세요.

 .wrapper { flex-direction: row || row-reverse || column || column-reverse; }

플렉스 랩

첫 번째 코드 샘플을 확인하면 자식 요소가 기본적으로 플렉스 래퍼 내에서 스택되지 않는다는 것을 알 수 있습니다. 여기에서 flex-wrap 이 작동합니다.

nowrap (기본값): 플렉스 컨테이너의 항목이 래핑되지 않도록 합니다.
wrap: 필요에 따라 항목을 여러 행(또는 flex-direction 에 따라 열)으로 래핑합니다.
wrap-reverse: wrap 과 동일하지만 항목이 래핑될 때 행(또는 열)의 수가 반대 방향으로 증가합니다.

CodePen에서 DD(@Diegue)의 Pen Flexbox @Toptal - Parent - `flex-wrap` 속성을 참조하세요.

 .wrapper { flex-wrap: nowrap || wrap || wrap-reverse; }

플렉스 플로우

flex-direction 및 flex-wrap 속성을 단일 속성인 flex-flow 로 결합할 수 있습니다.

 .wrapper { flex-flow: {flex-direction} {flex-wrap}; }

콘텐츠 정당화

이 속성은 자식 요소의 수평 정렬을 제어하는 데 사용됩니다.

flex-start (기본값): 요소가 왼쪽으로 정렬됩니다( text-align: left 가 있는 인라인 요소와 유사).
flex-end: 요소가 오른쪽으로 정렬됩니다( text-align: right 가 있는 인라인 요소와 유사).
center: 요소가 중앙에 배치됩니다( text-align: center 를 사용하는 인라인 요소와 유사).
space-around (마법이 시작되는 곳): 모든 요소는 각 항목 주위에 동일한 양의 공간으로 렌더링됩니다. 두 개의 순차적 자식 요소 사이의 공간은 가장 바깥쪽 요소와 래퍼 측면 사이의 공간의 두 배가 됩니다.
space-between: 요소가 동일한 거리로 분리되고 래퍼의 양쪽 가장자리 근처에 공백이 없다는 점을 제외하고 space-around 와 같습니다.

참고: flex-direction 이 column 또는 column-reverse 로 설정되면 축이 바뀝니다. 이 중 하나가 설정되면 justify-content 는 수평이 아닌 수직 정렬에 영향을 미칩니다.

CodePen에서 DD(@Diegue)의 Pen Flexbox @Toptal - Parent - `justify-content` 속성을 참조하십시오.

항목 정렬

이 속성은 justify-content 와 유사하지만 그 효과의 컨텍스트는 래퍼 자체가 아니라 행입니다.

flex-start: 요소가 래퍼의 상단에 수직으로 정렬됩니다.
flex-end: 요소가 래퍼의 맨 아래에 수직으로 정렬됩니다.
center: 요소는 래퍼 내에서 수직으로 중앙에 배치됩니다(마침내 이를 달성하기 위한 안전한 방법).
stretch (기본값): 요소가 래퍼의 전체 높이(행에 적용될 때)와 전체 너비(열에 적용될 때)를 차지하도록 합니다.
기준선: 요소를 실제 기준선에 수직으로 정렬합니다.

CodePen에서 DD(@Diegue)의 Pen Flexbox @Toptal - Parent - `align-items` 속성을 참조하십시오.

콘텐츠 정렬

이 속성은 justify-content 및 align-items 와 유사하지만 세로 축에서 작동하며 컨텍스트는 전체 래퍼(이전 예와 같은 행이 아님)입니다. 그 효과를 보려면 두 개 이상의 행이 필요합니다.

flex-start: 행이 위쪽에 수직으로 정렬됩니다(즉, 래퍼의 위쪽에서 쌓임).
flex-end: 행이 아래쪽에 수직으로 정렬됩니다(즉, 래퍼의 아래쪽에서 쌓임).
center: 행은 래퍼에서 세로로 중앙에 배치됩니다.
stretch (기본값): 일반적으로 이 속성은 래퍼의 전체 세로 높이를 활용하도록 요소를 늘립니다. 그러나 요소의 특정 높이를 설정한 경우 해당 높이가 적용되고 나머지 수직 공간(해당 행의 해당 요소 아래)은 비어 있습니다.
space-around: 모든 행은 수직으로 자체 주위에 동일한 양의 공간으로 렌더링됩니다(즉, 자체 위와 아래). 따라서 두 행 사이의 공간은 상단 및 하단 행과 래퍼 가장자리 사이의 공간의 두 배가 됩니다.
space-between: 요소가 동일한 거리로 분리되고 래퍼의 위쪽 및 아래쪽 가장자리에 공간이 없다는 점을 제외하고 space-around 와 같습니다.

CodePen에서 DD(@Diegue)의 Pen Flexbox @Toptal - Parent - `align-content` 속성을 참조하십시오.

플렉스 성장

이 속성은 요소가 사용해야 하는 사용 가능한 공간의 상대적 비율을 설정합니다. 값은 정수여야 하며 기본값은 0입니다.

동일한 플렉스 래퍼에 두 개의 다른 요소가 있다고 가정해 보겠습니다. 둘 다 flex-grow 값이 1이면 사용 가능한 공간을 공유하기 위해 동일하게 증가합니다. 그러나 아래 예와 같이 하나는 flex-grow 값이 1이고 다른 하나는 flex-grow 값이 2인 경우 flex-grow 값이 2인 이 값은 첫 번째 것보다 두 배 많은 공간을 차지하도록 증가합니다.

 .wrapper .elements { flex-grow: 1; /* Default 0 */ } .wrapper .elements:first-child { flex-grow: 2; }

CodePen에서 DD(@Diegue)의 Pen Flexbox @Toptal - Children - `flex-grow` 속성을 참조하세요.

플렉스 수축

flex-grow 와 유사하게 이 속성은 요소가 정수 값으로 "축소 가능"인지 여부를 설정합니다. flex-grow flex-shrink 는 플렉스 항목의 축소 계수를 지정합니다.

CodePen에서 DD(@Diegue)의 Pen Flexbox @Toptal - Children - `flex-shrink` 속성을 참조하세요.

 .wrapper .element { flex-shrink: 1; /* Default 0 */ }

플렉스 기반

이 속성은 사용 가능한 공간이 분배되고 이에 따라 요소가 조정되기 전에 요소의 초기 크기를 정의하는 데 사용됩니다.

힌트: flex-basis 는 모든 브라우저에서 calc() 및 box-sizing: border-box 를 지원하지 않으므로 이 중 하나를 사용해야 하는 경우 width 를 사용하는 것이 좋습니다( flex-basis: auto; 도 설정해야 합니다. flex-basis: auto; ).

CodePen에서 DD(@Diegue)의 Pen Flexbox @Toptal - Children - `flex-basis` 속성을 참조하세요.

 .wrapper .element { flex-basis: size || auto; /* Default auto */ }

몸을 풀다

다음과 같이 flex-grow , flex-shrink 및 flex-basis 속성을 단일 속성 flex 로 결합할 수 있습니다.

 .wrapper { flex: {flex-grow} {flex-shrink} {flex-basis}; }

힌트: flex 를 사용하려는 경우 모든 단일 값을 정의해야 합니다(기본값을 사용하려는 경우에도). 일부 브라우저는 값을 인식하지 못할 수 있기 때문입니다(일반적인 버그는 flex-grow 값을 정의하지 않은 것과 관련됨).

자기 정렬

이 속성은 align-items 와 유사하지만 효과가 각 요소에 개별적으로 적용됩니다. 가능한 값은 다음과 같습니다.

flex-start: 요소를 래퍼의 상단에 수직으로 정렬합니다.
flex-end: 요소를 래퍼의 맨 아래에 수직으로 정렬합니다.
center: 래퍼 내에서 요소를 수직으로 중앙에 배치합니다(마침내 이를 달성하는 간단한 방법!).
stretch (기본값): 래퍼의 전체 높이(행에 적용될 때) 또는 래퍼의 전체 너비(열에 적용될 때)를 차지하도록 요소를 늘립니다.
기준선: 실제 기준선에 따라 요소를 정렬합니다.

CodePen에서 DD(@Diegue)의 Pen Flexbox @Toptal - Children - `align-self` 속성을 참조하십시오.

주문하다

Flexbox에 포함된 최고의 기능 중 하나는 DOM을 수정하거나 JavaScript를 사용할 필요 없이 ( order 속성을 사용하여) 요소를 재정렬하는 기능입니다. order 속성이 작동하는 방식은 매우 간단합니다. z-index 가 항목이 렌더링되는 order 를 제어하는 것과 거의 동일한 방식으로 order는 요소가 래퍼 내에서 배치되는 순서를 제어합니다. 즉, 낮은 order 값(음수일 수도 있음)을 가진 요소는 더 높은 order 값을 가진 요소보다 먼저 배치됩니다.

CodePen에서 DD(@Diegue)의 Pen Flexbox @Toptal - Children - `order` 속성을 참조하세요.

 .wrapper .elements { order: 1; /* this one will be positioned second */ } .wrapper .elements:last-child { order: -1; /* this one will be positioned first */ }

종합하기: Flexbox의 사용 예

레이아웃 디자인과 관련하여 Flexbox는 가능성의 세계를 열어줍니다. 아래에서 Flexbox 속성의 몇 가지 사용 예를 찾을 수 있습니다.

수직 정렬 구성 요소

Flexbox를 사용하면 한 번에 여러 요소를 포함하여 무엇이든 수직으로 정렬할 수 있습니다. Flexbox가 없으면 여러 요소를 포함하는 하나의 자식을 만들어야 하는 위치 지정 또는 테이블 같은 기술을 사용해야 했습니다. 그러나 Flexbox를 사용하면 이러한 지루하고 깨지기 쉬운 기술을 뒤로하고 컨테이너 내부의 내용이 몇 번이나 변경되거나 변경 유형에 관계없이 래퍼에서 몇 가지 속성을 정의하기만 하면 됩니다!

 .wrapper { display: flex; /* always present for Flexbox practices */ flex-direction: column; /* elements stack */ justify-content: center; /* now that flex-direction is a column, the axis are swapped so this centers the content vertically */ min-height: 100vh /* make sure wrapper is taller enough */ }

Pen Flexbox @Toptal - 우리가 제공할 수 있는 실제 사용 - CodePen의 DD(@Diegue)에 의한 수직 정렬을 참조하십시오.

하프/하프 레이아웃

"half/half" 레이아웃은 두 개의 열이 있는 전체 높이 레이아웃이며, 각 열은 세로 중앙에 콘텐츠가 있습니다. 일반적으로 "스크롤 없이 볼 수 있는 부분"(즉, 페이지 로드 후 사용자가 아래로 스크롤하기 전)에 구현됩니다.

보다 전통적인 기술을 사용하여 부동 요소(각각 너비 50%)로 이 레이아웃을 만들고 부동 요소를 래퍼로 지울 수 있습니다(" <div> " :before 및 :after , overflow: hidden 또는 clear: both; 결국). 그러나 많은 작업이 필요하고 결과는 Flexbox가 제공하는 것만큼 안정적이지 않습니다.

다음 코드 스니펫에서 레이아웃을 설정하는 것이 얼마나 쉬운지, 모든 것이 수직으로 정렬되기 때문에 자식도 Flexbox 래퍼가 되는 방법을 볼 수 있습니다.

외부 래퍼:

 .wrapper { display: flex; flex-direction: column; /* only for mobile */ }

내부 래퍼:

 .inner-wrapper { flex-grow: 1; /* Allow the element to grow if there is available space */ flex-shrink: 1; /* Elements shrink at the same rate */ flex-basis: 100%; /* Elements will cover the same amount, if is possible the 100% of the width */ }

Pen Flexbox @Toptal - 우리가 제공할 수 있는 실제 사용 - CodePen에서 DD(@Diegue)의 Half-bleed 섹션을 참조하십시오.

전체 너비 Navbar 버튼

전체 너비 탐색 모음은 요소 수에 관계없이 탐색 모음 항목의 동일한 행에 공간을 균등하게 분배합니다.

아래 샘플에는 이 동작이 없는 아이콘 버튼도 있으며 원하는 방식으로 두 개를 결합할 수 있음을 보여줍니다. Flexbox가 없었다면 이러한 종류의 레이아웃을 구현하려면 JavaScript 코드가 사용 가능한 공간을 계산한 다음 확장된 버튼과 그렇지 않은 버튼에 따라 프로그래밍 방식으로 배포해야 했습니다.

Flexbox는 이것을 훨씬 간단하게 만듭니다.

래퍼 속성:

 .navbar { display: flex; }

스패닝 자식 속성:

 .navbar-item { flex-grow: 1; /* They will grow */ }

비 확장 자식 속성:

 .navbar-other { flex-grow: 0; // They won't grow }

Pen Flexbox @Toptal을 참조하십시오. - 우리가 제공할 수 있는 실제 사용 - CodePen의 DD(@Diegue)의 풀 블리드 버튼 탐색 모음.

블러브

다른 프로젝트에서 아이콘과 텍스트가 있는 정보 상자 세트를 몇 번이나 구현해야 했습니까?

이러한 요소 배포는 디지털 마케팅에서 대부분 유용하지만 소프트웨어 개발에서 다른 용도로 사용할 수도 있습니다. Flexbox의 기능을 사용하면 일종의 그리드를 설정할 수 있고 얼마나 많은 요소가 있는지에 관계없이 요소를 정렬할 수도 있습니다.

래퍼 속성:

 .wrapper { display: flex; flex-wrap: wrap; }

자식 속성:

 .blurb { flex-grow: 0; /* elements don't grow */ flex-shrink: 0; /* elements don't shrink in a flexible way */ flex-basis: auto; /* the width of the elements will be set by proportions in `width` due to flex-basis not support workaround */ width: calc(33.33% - 60px); /* calculate proportional width without space taken by padding (workaround for IE 11) */ }

태블릿 및 모바일 뷰포트의 경우 너비는 50%에서 100% 사이입니다.

Pen Flexbox @Toptal - 우리가 제공할 수 있는 실제 사용 - CodePen의 Blurbs by DD(@Diegue)를 참조하십시오.

브라우저 간 호환성 향상

Flexbox의 구문은 브라우저 버전에 따라 여러 번 변경되었습니다. 이것은 Flexbox로 레이아웃을 구현하고 이전 웹 브라우저, 특히 이전 버전의 Internet Explorer를 지원하려고 할 때 문제가 될 수 있습니다.

다행히도 광범위한 웹 브라우저에서 코드가 작동하도록 하는 많은 기술과 해결 방법이 훌륭한 리소스인 Flexbugs에 나열되어 있습니다. 해당 사이트의 정보를 따르면 다양한 웹 브라우저에서 더 나은 일관된 결과를 얻을 수 있습니다.

접두사 작업은 이와 관련하여 특히 유용합니다. CSS 규칙의 접두사를 자동화하려면 다음 도구 중 하나를 선택할 수 있습니다.

루비:

자동 접두사 레일
중개인 자동 접두사

Node.js:

PostCSS 자동 접두사
그런트 자동 접두사
꿀꺽 자동 접두사

스마트 레이아웃 구축 시작

Flexbox는 작업 속도, 개선 및 확장을 위한 훌륭한 도구입니다. 한계는 개발자의 상상에 있습니다.

다음 레이아웃을 계획하는 데 시각 자료가 필요하면 다음과 같은 깔끔한 놀이터를 사용해 보세요.

CodePen에서 Pen Flexbox @Toptal - DD(@Diegue)의 Flexbox 놀이터를 참조하십시오.

새 창에서 엽니다.

대다수의 사용자가 최신 웹 브라우저를 채택함에 따라 Flexbox를 사용하면 지저분한 JavaScript 코드를 자세히 살펴보거나 복잡한 CSS를 만들 필요 없이 놀라운 레이아웃을 쉽게 만들 수 있습니다.