Responsywne projektowanie stron internetowych za pomocą FlexBox | Wyjaśnione

Responsywny projekt stron internetowych jest określany jako projekt, który zmienia jego układ w zależności od środowiska, w którym jest używany. Według środowiska rozumiemy, że zachowanie strony internetowej zmieni się na podstawie wielkości ekranu urządzenia, szerokości, rozdzielczości, orientacji itp. Istnieje wiele sposobów, na które możesz sprawić, by Twoja witryna reagowała, takie jak zapytania medialne, siatka, flexbox itp. Niniejszy zapis będzie polegał na tym, jak sprawić, by projekt internetowy reagował za pomocą FlexBox.

Responsywny projekt strony internetowej za pomocą FlexBox

CSS Flexbox to model układu, który umożliwia wydajne i dynamiczne układ elementów. Ten układ jest jednowymiarowy i pozwala umieszczać elementy wewnątrz pojemnika z równie rozłożoną przestrzenią.

To sprawia, że ​​elementy reagują, co oznacza, że ​​elementy zmieniają swoje zachowanie zgodnie z rodzajem wyświetlania ich urządzenia. Ponadto sprawia, że ​​elementy są elastyczne i zapewnia im odpowiednią pozycję i symetrię.

Flexbox ma dwa komponenty, które są eleganckim pojemnikiem i elementem Flex. Flex pojemnik opisuje właściwości elementu przodka, podczas gdy element Flex określa właściwości elementów następców. Każdy z tych komponentów wykorzystuje różne właściwości do wdrożenia FlexBox.

Tutaj przedstawimy Ci różne responsywne układy, które możesz stworzyć dla różnych urządzeń za pomocą FlexBox.

Jak utworzyć responsywny pasek nawigacyjny za pomocą flexbox?

Tutaj zademonstrujemy, w jaki sposób możesz wykonać responsywny pasek nawigacyjny za pomocą układu jednopoziomowego dla urządzeń takich jak telefony komórkowe, tablety itp., Które mają mały rozmiar ekranu i dwukolorowy układ urządzeń takich jak komputery, laptopy itp. które mają większe rozmiary ekranu.

Oto wizualna reprezentacja układu jednorodnego dla małych rozmiarów ekranu.

Poniższy schemat pokazuje układ dwukolumnowy dla większych rozmiarów ekranu.

Teraz przejdźmy do kodu.

Html

Dom
Praca
O

W powyższym kodzie stworzyliśmy FlexBox, gniazdując trzy pojemniki Div wewnątrz większego pojemnika Div.

CSS

.flex-container
Wyświetlacz: Flex;
Kierowanie Flex: kolumna;
Rozmiar czcionki: 25px;
Text-Align: Center;
Font-Family: Verdana, Genewa, Tahoma, Sans-Serif;

Korzystając z klasy przypisanej do większego Div, ustawiamy jego wyświetlacz do FLED, a następnie podajemy kierunek za pomocą wartości kolumny właściwości przełączania przepływu, a następnie styliza naszą div z podstawowymi CSS.

CSS

.NAV1
kolor tła: Darkgray;
Wyściółka: 15px;
Flex: 50px;

.NAV: Hover
kolor tła: światła;

Tutaj po prostu stylizujemy nasze kolumny navbar, zapewniając im kolor tła, wyściółkę i początkową długość za pomocą właściwości Flex i definiując pewne styl na zawisie linku nawigacyjnego.

CSS

@Media (min-szerokość: 768px)
.flex-container
Flex-direction: Row;

Powyższe zapytanie stwierdza, że ​​gdy szerokość konkretnego urządzenia wynosi 768px lub szerszy, kierunek układu zmieni się z układu jednopolowego na dwukolumnowy układ.

Wyjście

Gdy szerokość wynosi 767 px lub mniej.

Gdy szerokość jest 768px lub szersza.

Responsywny navbar został pomyślnie wygenerowany.

Jak utworzyć responsywną siatkę obrazu za pomocą Flexbox?

Oto, w jaki sposób możesz stworzyć responsywną galerię, która zmienia jego zachowanie według okna przeglądarki.

Html

Tutaj stworzyliśmy pojemnik na Div i zagnieżdżyliśmy w nim dwa kolejne pojemniki Div. Oba zagnieżdżone pojemniki dodatkowo gniazdują z trzema obrazami.

CSS

.pojemnik
Wyświetlacz: Flex;
Flex-Wrap: Wrap;
Wyściółka: 5px;

Div z klasą „kontener” jest wyświetlany jako Flexbox i otrzymał pewne wyściółki. Ponadto właściwość Flex-Wrap przypisuje się wartość opakowania, co oznacza, że ​​w razie potrzeby obrazy zostaną owinięte wewnątrz pojemnika.

CSS

.kolumny IMG
szerokość: 100%;

.kolumny
Flex: 30%;
maksymalna szerokość: 30%;
Wyściółka: 5px;

Obrazy podano 100% szerokości, aby odpowiednio pasowały do ​​pojemnika, a ponadto za pomocą elastycznej i maksymalnej szerokości tworzymy dwie kolumny, które zostaną umieszczone obok siebie.

CSS

@Media (maksymalny szerokość: 600px)
.kolumny
Flex: 50%;
maksymalna szerokość: 50%;

Zapytanie multimedialne określa, że ​​jeśli szerokość jest mniejsza niż określona liczba, dwupokolowa zostanie przekonwertowana na jedną.

Wyjście

Gdy szerokość jest 600px lub szersza.

Gdy szerokość wynosi 600px lub mniej.

Utworzono responsywną galerię obrazów.

Wniosek

Responsywny projekt strony internetowej można tworzyć przy użyciu różnych właściwości FlexBox, takich jak kierunek Flex, Flex-Flow, Flex-Wrap itp. Zapytanie multimedialne powinno określić typ i funkcje urządzenia, zgodnie z którym projektowanie stron internetowych zmieni wygląd na różnych urządzeniach. W powyższym artykule zademonstrowaliśmy kilka układów, które można stworzyć za pomocą różnych właściwości FlexBox wraz z zapytaniami o media.