Flexbox를 사용하여 최신 CSS 카드 디자인 레이아웃을 만드는 방법

CSS3의 새로운 레이아웃 모드인 Flexbox 덕분에 말 그대로 모든 카드를 한 줄로 가져올 수 있습니다. 카드 디자인은 지난 몇 년 동안 인기를 얻었습니다. 아마 눈치채셨겠지만 소셜 미디어 사이트는 실제로 카드를 수용했습니다. Pinterest와 Dribbble은 카드 레이아웃을 사용하여 정보와 시각 자료를 제공합니다. Material Design에 관심이 있다면 Google의 카드가 패턴 라이브러리에 잘 설명되어 있습니다.

저는 개인적으로 가독성과 스크롤 가능 면에서 카드 레이아웃을 좋아합니다. 그들은 한 번에 탐색, 스크롤 및 스캔하기 쉬운 방식으로 정보의 완벽한 "버스트"를 제공합니다.

카드 레이아웃을 만드는 방법

짝수 높이 콘텐츠 행을 시도한 적이 있다면 이를 구축하는 것이 항상 쉽지는 않다는 것을 알고 있습니다. 당신은 아마 과거에 그것을 작동시키기 위해 꽤 많은 만지작거림을 해야 했을 것입니다. Flexbox 덕분에 그 시절은 거의 뒤쳐져 있습니다. 제공해야 하는 브라우저 지원 수준에 따라 일부 대체를 포함해야 할 수 있지만 이 기능에 대한 브라우저 지원은 요즘 매우 안정적입니다. 안전을 위해 신뢰할 수 있는 Can I use에서 Flexbox를 확인하십시오. 그리고 라이브 사이트를 변경해서는 안 된다는 점을 기억하십시오. 대신 무료 로컬 WordPress 개발 앱인 Local을 사용해 보십시오.

Flexbox의 기본 아이디어는 컨테이너의 표시 속성을 flex 로 설정할 수 있다는 것입니다. 이 속성은 그 안에 있는 모든 컨테이너의 크기를 "조정"합니다. 동일한 높이 열과 크기 조정 및 축소 옵션은 고급 레이아웃을 만드는 방법을 단순화합니다. 카드로 시작하는 것은 Flexbox 치트 시트와 같지만 일단 기본을 마스터하면 더 복잡한 레이아웃을 만들 수 있습니다.

Flexbox 및 다용성

카드는 다재다능하고 시각적으로 매력적이며 크고 작은 장치 모두에서 쉽게 상호 작용할 수 있어 반응형 디자인에 적합합니다. 각 카드는 쉽게 확장하거나 축소할 수 있는 콘텐츠 컨테이너 역할을 합니다. 화면 크기가 작아질수록 일반적으로 행의 카드 수가 줄어들고 세로로 쌓이기 시작합니다. 고정 또는 가변 높이가 될 수 있으므로 추가적인 유연성이 있습니다.

레이아웃을 만드는 방법

더 큰 화면에는 4개의 수평 컨테이너 행, 중간 크기에는 2개, 소형 장치에는 단일 열이 있는 Flexbox 카드 레이아웃을 만들 것입니다.

다음은 4장의 카드를 표시하기 위한 기본 레이아웃을 만드는 코드 스니펫입니다. 내부 카드 콘텐츠(코드 샘플에서 너무 길어짐)는 포함하지 않았으므로 일부 시작 콘텐츠를 거기에 넣어야 합니다. 또한 시작하기 위해 여기에 표시된 4개의 카드로 된 한 행이 있지만 여러 행의 콘텐츠에서 동작을 확인하려는 경우 더 추가할 수 있습니다. 모든 코드는 Codepen에서 찾을 수 있습니다.

그리드 패턴으로 레이아웃 디자인을 표시하려면 외부에서 시작하여 작업해야 합니다. 올바른 컨테이너를 참조하는지 확인하는 것이 중요합니다. 그렇지 않으면 상황이 약간 지저분해집니다.

.cards 클래스가 있는 섹션이 먼저 대상이 됩니다. 컨테이너의 display 속성은 flex 로 변경해야 하는 것입니다.

시작하려는 HTML은 다음과 같습니다.

<div class="centered">

            <section class="cards">
                
                <article class="card">
                   <p>content for card one</p>
                </article><!-- /card-one -->

 	<article class="card">
                   <p>content for card two</p>
            </article><!-- /card-two -->

<article class="card">
                  <p>content for card three</p>
            </article><!-- /card-three -->

<article class="card">
                   <p>content for card four</p>
            </article><!-- /card-four -->

	</section>
</div>

시작할 CSS는 다음과 같습니다.

.cards {
   display: flex;
   justify-content: space-between;
}

플렉스 속성

너무 깊이 들어가기 전에 flex 속성의 기본 사항을 아는 것이 좋습니다. flex 속성은 동일한 컨테이너 내부의 나머지 유연한 항목을 기준으로 항목의 길이를 지정합니다. flex 속성은 flex-grow , flex-shrink 및 flex-basis 속성의 약어입니다. 기본값은 0 1 auto; . 제 생각에는 Flexbox를 완전히 이해하는 가장 좋은 방법은 다양한 값을 가지고 놀고 어떤 일이 일어나는지 보는 것입니다.

플렉스 항목의 flex-grow 속성은 항목이 차지해야 하는 플렉스 컨테이너 내부 공간의 양을 지정합니다.

flex-shrink 속성은 동일한 컨테이너 내의 나머지 유연한 항목에 비해 항목이 축소되는 방식을 지정합니다.

flex-basis 속성은 플렉스 항목의 초기 기본 크기를 지정합니다. box-sizing을 사용하여 달리 지정하지 않는 한 이 속성은 콘텐츠 상자의 크기를 결정합니다. 너비가 콘텐츠에 의해 정의될 때 기본값은 width: auto; . 자체 콘텐츠로 정의된 공간을 차지합니다. flex-basis: 15em; . 값이 0이면 항목이 여유 공간을 채우기 위해 확장되지 않기 때문에 상황이 꽤 설정됩니다.

우리는 display: flex; 및 justify-content: space-between; 이 시점에서 상황은 약간 예측할 수 없습니다. Flexbox는 지금 당장은 분명하지 않지만 사용 중입니다. 이 선언을 통해 각 플렉스 항목은 가로 행에서 서로 옆에 배치되었습니다.

Codepen에서 이것을 참조하십시오.

이러한 플렉스 항목 각각의 너비가 다른 이유가 궁금할 것입니다. Flexbox는 이러한 각 항목에 대한 가장 작은 기본 너비를 파악하려고 합니다. 그리고 다양한 단어 길이 및 기타 디자인 요소로 인해 이러한 다양한 크기의 상자가 생깁니다. 일관된 모양을 얻으려면 조금 더 작업해야 합니다. 랩을 설정하고 원하는 너비를 결정하면 이러한 카드를 균일한 카드로 만드는 데 도움이 됩니다.

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

기본적으로 플렉스 항목은 모두 한 줄에 맞추려고 합니다. flex-wrap: wrap; 기본값이 전체 너비이기 때문에 항목이 서로 아래로 줄 바꿈됩니다.

Codepen에서 이것을 참조하십시오.

전체 너비는 작은 장치에 적합하므로 다양한 중단점을 다루기 전에 더 큰 화면을 계획할 때 이를 염두에 두도록 합시다. 너비를 변경하면 카드가 더 고르게 보이기 시작합니다.

개별 카드의 스타일을 지정하려면 이제 .card 클래스를 추가해야 합니다. 이것은 .cards 스타일 바로 아래에 갈 수 있습니다.

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.card {
	flex: 0 1 24%;
}

이전부터 flex 속성은 축약형임을 기억하십시오. flex-grow 는 0, flex-shrink 는 1, width 는 24%입니다. 지정된 너비를 추가하면 사이에 약간의 공간이 있는 4행이 생성됩니다.

Codepen에서 이것을 참조하십시오.

간격을 위해 justify-content 속성을 설정했습니다. 첫 번째 항목은 왼쪽으로 표시되고 두 번째 및 세 번째 항목은 가운데에 표시되며 네 번째 항목은 오른쪽으로 표시됩니다. 카드 너비가 24%이기 때문에 24%에 있는 4개의 열의 합계가 100%가 아니기 때문에 약간의 공간이 남습니다. 정확히 4% 남았습니다. 이 4%는 각 항목 사이에 균등하게 배치됩니다. 따라서 카드 사이에 약 1.33%의 공간이 있습니다.

Codepen에서 이것을 참조하십시오.

calc 를 사용하여 더 정확할 수도 있습니다. calc를 사용하도록 flex-basis 값을 변경하면 다음과 같습니다.

.card {
	flex: 0 1 calc(25% - 1em);
}

이것의 멋진 점은 브라우저가 공간의 25%를 차지하고 1em을 제거하여 카드를 약간 더 작게 만든다는 것입니다.

사용 가능한 공간을 조정하는 방법입니다. 1em이 항목 사이에 고르게 분포되어 완벽한 레이아웃이 완성됩니다.

지금까지 우리는 키에 대해 별로 이야기하지 않았습니다. 높이가 어떻게 작동하는지 보여주기 위해 다른 행의 카드를 추가했습니다. 어떤 카드에 가장 많은 콘텐츠가 있는지에 따라 다릅니다. 다른 카드의 높이는 그 뒤를 따릅니다. 따라서 모든 콘텐츠 행의 높이가 동일합니다.

이것은 매우 "축소된" 보기이지만 두 번째 카드에 해당 행의 다른 카드보다 더 많은 텍스트가 있기 때문에 첫 번째 행이 상당히 높다는 것을 알 수 있습니다. 두 번째 행은 텍스트가 적으므로 전체적으로 더 짧습니다.

소형 기기용 카드

현재 우리는 모든 화면에 4개의 열을 가지고 있는데, 이는 실제로 모범 사례가 아닙니다. 브라우저 창을 더 작게 만들면 4개의 카드가 더 작은 화면에서 더 찌그러지는 것을 볼 수 있으므로 가독성에 적합하지 않습니다. 운 좋게도 미디어 쿼리를 사용하면 상황이 훨씬 좋아지기 시작할 것입니다.

문제 해결을 시작하기 위해 지정된 중단점은 콘텐츠가 모든 다양한 화면 유형에서 올바르게 표시되도록 합니다.

다음은 사용될 중단점입니다(자신의 중단점도 자유롭게 사용하세요. 개념은 여전히 ​​적용됨).

@media screen and (min-width: 40em) {
    .cards {
   }

    .card {
    }
}

@media screen and (min-width: 60em) {
    .cards {
   }
    
    .card {
     }
}


@media screen and (min-width: 52em) {
    .centered {
       
    }
}

지금까지 큰 생각이었습니다. 모바일 우선 사고 방식으로 들어가 min-width: 40em 중단점부터 시작하겠습니다.

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

이러한 변경으로 인해 카드는 전체 화면 너비로 표시되고 너비가 약 640픽셀보다 작은 모든 화면에서 서로 아래에 쌓입니다. 브라우저 창을 그 이상으로 확장하면 4열이 반환됩니다. 이것은 min-width 가 40em이고 여기에서 4개의 카드 행을 생성했기 때문에 의미가 있습니다.

여기서 누락된 것은 중간 지점입니다. 중간 범위의 경우 4개의 눌린 카드보다 2개의 카드를 연속으로 사용하는 것이 더 읽기 쉽습니다. 두 개의 카드 행을 파악하기 전에 네 개의 카드 행이 있는 가장 큰 화면을 수용하기 위해 또 다른 미디어 쿼리를 추가해야 합니다.

@media screen and (min-width: 60em) {
    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

min-width 새 미디어 쿼리는 4개의 카드가 선언되는 위치입니다. 40em의 min-width 는 두 개의 카드 행이 선언되는 곳입니다. 50% – 1em의 flex calc 값으로 마법이 일어나고 있습니다.

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(50% - 1em);
    }
}

그 간단한 변경으로 이제 모든 것이 작동합니다! 브라우저 창을 축소 및 확장하여 모든 것이 올바르게 표시되는지 확인합니다.

Codepen에서 이것을 참조하십시오.

카드 행이 올바르게 보이면 계속 진행할 수 있습니다! 이 자습서를 시도하고 마지막 행이 고르지 않다면 계속 읽으십시오.

동적 콘텐츠 및 카드의 마지막 행 간격

카드 수에 따라 마지막 행이 구피일 수도 있고 없을 수도 있습니다. 마지막 행이 가득 차거나 추가 카드가 한 장만 있어도 문제가 되지 않습니다. 콘텐츠를 미리 계획해야 하는 경우가 있지만 콘텐츠가 동적인 경우 카드의 마지막 행이 의도한 대로 작동하지 않을 수 있습니다. 추가 카드가 두 개 이상 있고 콘텐츠 정렬이 설정되어 있으면 카드 사이의 공간이 균일해지며 위의 행과 정렬되지 않을 수 있습니다.

이 모양을 얻으려면 다른 사고 방식이 필요합니다. 나는 이것이 효율적이지 않다고 주장하고 싶지만 비교적 간단합니다.

.cards 및 .card 스타일 지정은 미디어 쿼리 외부에서 수행되었습니다.

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

.card {
    flex: 1 0 500px;
    box-sizing: border-box;
    margin: 1rem .25em;
}

미디어 쿼리는 카드 수가 결정되는 곳입니다.

@media screen and (min-width: 40em) {
    .card {
       max-width: calc(50% -  1em);
    }
}

@media screen and (min-width: 60em) {
    .card {
        max-width: calc(25% - 1em);
    }
}

수정된 솔루션을 보려면 Codepen을 살펴보십시오.

이 문서가 시작하는 데 도움이 되는 Flexbox 개념의 기본 개요를 제공하기를 바랍니다. Flexbox는 매우 우수한 브라우저 지원을 제공하며 카드 레이아웃은 웹사이트 디자인에서 계속 활용될 것입니다. 그리고 카드 레이아웃은 Flexbox를 활용하는 방법의 시작에 불과하다는 것을 기억하십시오.

다음: WordPress 사이트를 더 빠르게 디자인

이 가이드에서는 작업 속도를 높이고 WordPress 워크플로의 속도를 높이는 방법에 대한 팁을 다룹니다. 초기 사이트 설정에서 라이브 푸시에 이르기까지 일상 업무에서 작업 시간을 줄이는 방법을 알아보십시오!

여기에서 무료 가이드를 다운로드하세요!

Flexbox를 사용하여 다른 무엇을 구축했습니까? 댓글에서 프로젝트를 공유하세요!