Jak używać Flexbox do tworzenia nowoczesnego układu karty CSS?

Dzięki Flexbox, nowemu trybowi układu w CSS3, możemy uzyskać wszystkie nasze karty z rzędu — dosłownie. Projekty kart zyskały na popularności w ciągu ostatnich kilku lat; jak zapewne zauważyłeś, serwisy społecznościowe naprawdę przyjęły karty. Pinterest i Dribbble używają układów kart do prezentowania informacji i wizualizacji. A jeśli interesujesz się Material Design, karty Google są dobrze opisane w ich bibliotece wzorów.

Osobiście lubię układy kart za ich czytelność i przewijalność. Prezentują idealny „wyrzut” informacji w sposób, który można łatwo przeglądać, przewijać i skanować jednocześnie.

Jak stworzyć układ karty

Jeśli kiedykolwiek próbowałeś rzędów treści o równej wysokości, wiesz, że ich tworzenie nie zawsze było łatwe. Prawdopodobnie w przeszłości musiałeś trochę pokombinować, aby to zadziałało. Dzięki Flexbox te czasy są już prawie za Tobą. W zależności od poziomu obsługi przeglądarki, którą musisz zapewnić, może być konieczne uwzględnienie pewnych rozwiązań awaryjnych, ale obsługa tej funkcji przez przeglądarkę jest obecnie dość niezawodna. Aby być bezpiecznym, sprawdź Flexbox na zaufanym Can I use. I pamiętaj, nigdy nie powinieneś wprowadzać zmian w swojej aktywnej witrynie. Zamiast tego spróbuj poeksperymentować z Local, bezpłatną lokalną aplikacją programistyczną WordPress.

Podstawową ideą Flexbox jest to, że możesz ustawić właściwość wyświetlania kontenera na flex , co spowoduje „wygięcie” rozmiaru wszystkich kontenerów w nim zawartych. Kolumny o równej wysokości oraz opcje skalowania i zamawiania uproszczą tworzenie zaawansowanych układów. Zaczynanie od kart jest jak ściągawka Flexbox, ale kiedy opanujesz podstawy, możesz tworzyć bardziej złożone układy.

Flexbox i wszechstronność

Karty są wszechstronne, atrakcyjne wizualnie i łatwe w obsłudze zarówno na dużych, jak i małych urządzeniach, co jest idealne do projektowania responsywnego. Każda karta działa jak pojemnik na zawartość, który można łatwo skalować w górę lub w dół. W miarę zmniejszania się ekranów liczba kart w rzędzie zwykle maleje i zaczynają się układać pionowo. Istnieje dodatkowa elastyczność, ponieważ mogą mieć stałą lub zmienną wysokość.

Jak stworzyć układ

Stworzymy układ kart Flexbox, który składa się z rzędu czterech poziomych kontenerów na większych ekranach, dwóch na średnich i jednej kolumny dla małych urządzeń.

Poniżej znajduje się fragment kodu umożliwiający utworzenie podstawowego układu wyświetlania czterech kart. Nie uwzględniam wewnętrznej zawartości karty (ponieważ jest to zbyt długie w przykładach kodu), więc pamiętaj, aby umieścić tam trochę początkowej zawartości (i ilość zawartości różni się między czterema kartami). Na początku pokazany jest jeden wiersz czterech kart, ale można dodać więcej, jeśli chcesz zobaczyć zachowanie z wieloma wierszami treści. Cały kod można znaleźć na Codepen.

Aby wyświetlić nasz projekt układu we wzorze siatki, musimy zacząć od zewnątrz i wejść do środka. Ważne jest, aby odnieść się do właściwego kontenera, w przeciwnym razie będzie trochę bałaganu.

Sekcja z klasą .cards jest tym, czym najpierw zajmiemy się. Właściwość wyświetlania kontenera jest tym, co musimy zmienić na flex .

Oto kod HTML, od którego chcesz zacząć:

<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>

Oto CSS na początek:

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

Elastyczna nieruchomość

Zanim wejdziesz zbyt głęboko, dobrze jest poznać podstawy właściwości flex. Właściwość flex określa długość elementu w stosunku do reszty elastycznych elementów wewnątrz tego samego kontenera. Właściwość flex jest skrótem dla właściwości flex-grow , flex-shrink i flex-basis . Domyślna wartość to 0 1 auto; . Moim zdaniem najlepszym sposobem, aby w pełni zrozumieć Flexbox, jest pobawić się różnymi wartościami i zobaczyć, co się stanie.

Właściwość flex-grow elementu flex określa, jaką ilość miejsca wewnątrz kontenera flex powinien zajmować element.

Właściwość flex-shrink określa, w jaki sposób element będzie się kurczył w stosunku do pozostałych elementów elastycznych w tym samym kontenerze.

Właściwość flex-basis określa początkowy główny rozmiar elementu flex. Ta właściwość określa rozmiar pola zawartości, chyba że określono inaczej za pomocą określania rozmiaru pola. Auto jest wartością domyślną, gdy szerokość jest określona przez zawartość, co jest podobne do width: auto; . Zajmie przestrzeń określoną własną treścią. Może istnieć określona wartość, która pozostaje prawdziwa, jak widać w flex-basis: 15em; . Jeśli wartość wynosi 0, wszystko jest dobrze ustawione, ponieważ element nie rozwinie się, aby wypełnić wolną przestrzeń.

Zaczęliśmy od display: flex; i justify-content: space-between; i w tym momencie sprawy są trochę nieprzewidywalne. Flexbox jest używany, chociaż nie jest to teraz zbyt oczywiste. Dzięki tej deklaracji każdy z elementów flex został umieszczony obok siebie w poziomym rzędzie.

Zobacz to na Codepen.

Prawdopodobnie zastanawiasz się, dlaczego każdy z tych elastycznych elementów ma inną szerokość. Flexbox próbuje ustalić, jaka jest najmniejsza domyślna szerokość dla każdego z tych elementów. A ze względu na różne długości słów i inne elementy projektu, otrzymujesz pudełka o różnych rozmiarach. Aby uzyskać spójny wygląd, będziemy musieli wykonać trochę więcej pracy. Ustawienie owinięcia i określenie pożądanej szerokości pomoże przekształcić je w jednolite karty.

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

Domyślnie wszystkie elementy elastyczne będą próbowały zmieścić się w jednej linii. Dodanie flex-wrap: wrap; sprawia, że ​​elementy zawijają się jeden pod drugim, ponieważ domyślnie jest to pełna szerokość.

Zobacz to na Codepen.

Pełna szerokość jest idealna dla małych urządzeń, więc miejmy to na uwadze, planując nasz większy ekran, zanim zajmiemy się różnymi punktami przerwania. Kiedy zmieniamy szerokość, karty zaczynają wyglądać bardziej równomiernie.

Musimy teraz dodać klasę .card , aby nadać styl naszym indywidualnym kartom. To może przejść bezpośrednio pod style .cards .

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

.card {
	flex: 0 1 24%;
}

Pamiętaj, że wcześniej, właściwość flex jest skrótowa: flex-grow to 0, flex-shrink to 1, a width to 24%. Dodając określoną szerokość, otrzymujemy rząd czterech z pewną przerwą między nimi.

Zobacz to na Codepen.

Ustawiamy właściwość justify-content na potrzeby odstępów. Pierwsza pozycja jest wyświetlana mocno po lewej, druga i trzecia pozycja są wyświetlane pośrodku, a czwarta pozycja jest wyświetlana mocno po prawej. Ponieważ szerokość karty wynosi 24%, zostało trochę miejsca, ponieważ nasze cztery kolumny na 24% nie dają 100%. Dokładnie zostało nam 4%. Te 4% jest równo rozmieszczone między każdą z pozycji. Mamy więc około 1,33% przestrzeni między kartami.

Zobacz to na Codepen.

Możemy być bardziej precyzyjni również używając funkcji calc . Zmiana wartości flex-basis na użycie calc wyglądałaby mniej więcej tak:

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

Fajną rzeczą jest to, że przeglądarka pobierze 25% miejsca i usunie z niego 1, co sprawia, że ​​karty są nieco mniejsze.

To sprytny sposób na dostosowanie dostępnej przestrzeni. 1em jest równomiernie rozłożony między przedmiotami i otrzymujemy idealny układ.

Do tej pory tak naprawdę niewiele mówiliśmy o wzroście. Dodałem kolejny rząd kart, aby zademonstrować, jak działa wysokość. Zależy to od tego, która karta ma najwięcej treści – wysokość pozostałych podąży za nią. Dlatego każdy wiersz treści będzie miał tę samą wysokość.

Jest to bardzo pomniejszony widok, ale zauważysz, że pierwszy rząd jest dość wysoki, ponieważ druga karta zawiera więcej tekstu niż pozostałe w tym rzędzie. Drugi wiersz zawiera mniej tekstu, więc ogólnie jest krótszy.

Karty do mniejszych urządzeń

Obecnie na wszystkich ekranach mamy cztery kolumny, co nie jest najlepszą praktyką. Jeśli zmniejszysz okno przeglądarki, zobaczysz, że cztery karty są po prostu bardziej zgniecione na mniejszych ekranach, co nie jest idealne do czytelności. Na szczęście dzięki zapytaniom mediów sprawy zaczną wyglądać znacznie lepiej.

Aby rozpocząć rozwiązywanie problemu, określone punkty przerwania zapewnią prawidłowe wyświetlanie treści na wszystkich różnych typach ekranów.

Oto następujące punkty przerwania, które zostaną użyte (możesz również użyć własnego, koncepcje nadal obowiązują):

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

    .card {
    }
}

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


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

Do tej pory to było wielkie myślenie. Przejdźmy do nastawienia na urządzenia mobilne i zacznijmy od 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);
    }
}

Dzięki tym zmianom karty będą wyświetlane na pełnym ekranie i układają się jedna na drugiej na dowolnym ekranie o szerokości mniejszej niż około 640 pikseli. Jeśli rozwiniesz okno przeglądarki do czegoś powyżej tego, powróci kolumna czterech. Ma to sens, ponieważ min-width wynosi 40em i właśnie tam utworzyliśmy rząd czterech kart.

To, czego tu brakuje, to środek. W przypadku średniego zasięgu posiadanie dwóch kart z rzędu jest bardziej czytelne niż czterech zgniecionych. Zanim ustalimy rząd dwóch kart, należy dodać kolejne zapytanie o media, aby pomieścić największe ekrany, które będą miały rząd czterech kart.

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

Nowe zapytanie o media o min-width 60 em to miejsce, w którym zostaną zadeklarowane cztery karty. min-width 40em to miejsce, w którym zostanie zadeklarowany rząd dwóch kart. Magia dzieje się przy wartości flex calc 50% – 1em.

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

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

Dzięki tej prostej zmianie wszystko działa! Zmniejsz i rozwiń okno przeglądarki, aby upewnić się, że wszystko wygląda poprawnie.

Zobacz to na Codepen.

Jeśli twoje rzędy kart wyglądają dobrze, możesz iść! Jeśli korzystasz z tego samouczka i masz nierówny ostatni wiersz, czytaj dalej.

Treść dynamiczna i odstępy między ostatnimi kartami

W zależności od liczby kart, możesz mieć głupkowaty ostatni rząd lub nie. Jeśli jest cały ostatni rząd lub tylko jedna dodatkowa karta, nie będzie problemu. Czasami zawartość jest zaplanowana z wyprzedzeniem, ale jeśli zawartość jest dynamiczna, ostatni rząd kart może nie zachowywać się zgodnie z oczekiwaniami. Jeśli jest więcej niż jedna dodatkowa karta i ustawiono treść uzasadniającą, spowoduje to wyrównanie odstępu między nimi i może nie odpowiadać wierszom powyżej.

Aby uzyskać taki wygląd, wymaga to innego sposobu myślenia. Twierdzę, że to nie jest tak wydajne, ale jest stosunkowo proste.

.cards i .card została wykonana poza zapytaniem o media:

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

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

Zapytania o media służą do określania liczby kart:

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

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

Zajrzyj do Codepen, aby zobaczyć zmodyfikowane rozwiązanie.

Mamy nadzieję, że daje to podstawowy przegląd koncepcji Flexbox, które pomogą Ci zacząć. Flexbox ma całkiem dobrą obsługę przeglądarek, a układy kart będą nadal wykorzystywane w projektach stron internetowych. I pamiętaj, układy kart to dopiero początek tego, jak możesz wykorzystać Flexbox.

Dalej: Szybsze projektowanie witryn WordPress

W tym przewodniku omówimy wskazówki, jak pracować szybciej i przyspieszyć przepływ pracy WordPress. Od początkowej konfiguracji witryny po udostępnienie jej na żywo, odkryj, jak możesz skrócić godziny pracy z codziennej pracy!

Pobierz bezpłatny przewodnik tutaj!

Co jeszcze zbudowałeś za pomocą Flexbox? Podziel się swoimi projektami w komentarzach!