Flexbox - przegląd

Crosnąco Style Sheets (CSS) to prosty język projektowy mający na celu uproszczenie procesu tworzenia prezentacji internetowych. CSS obsługuje wygląd i styl strony internetowej.

Korzystając z CSS, możesz kontrolować kolor tekstu, styl czcionek, odstępy między akapitami, rozmiar i układ kolumn, jakie obrazy tła lub kolory są używane, projekty układu, różnice w wyświetlaniu dla różnych urządzeń i rozmiary ekranu a także wiele innych efektów.

Aby określić położenie i wymiary pudełek, w CSS możesz użyć jednego z dostępnych trybów układu -

• The block layout - Ten tryb jest używany podczas układania dokumentów.

• The inline layout - Ten tryb jest używany podczas układania tekstu.

• The table layout - Ten tryb jest używany podczas układania tabel.

• The table layout - Ten tryb jest używany do pozycjonowania elementów.

Wszystkie te tryby są używane do wyrównywania określonych elementów, takich jak dokumenty, tekst, tabele itp., Jednak żaden z nich nie zapewnia kompletnego rozwiązania do tworzenia złożonych witryn internetowych. Początkowo jest to używane przy użyciu kombinacji elementów pływających, elementów pozycjonowanych i układu tabeli (często). Ale pływaki pozwalają tylko na poziome ustawienie pudeł.

Co to jest Flexbox?

Oprócz wyżej wymienionych trybów, CSS3 zapewnia inny tryb układu Flexible Box, powszechnie nazywany jako Flexbox.

Korzystając z tego trybu, można łatwo tworzyć układy dla złożonych aplikacji i stron internetowych. W przeciwieństwie do pływaków, układ Flexbox daje pełną kontrolę nad kierunkiem, wyrównaniem, kolejnością i rozmiarem pudełek.

Funkcje Flexbox

Poniżej przedstawiono godne uwagi cechy układu Flexbox -

• Direction - Możesz rozmieścić elementy na stronie internetowej w dowolnym kierunku, na przykład od lewej do prawej, od prawej do lewej, od góry do dołu i od dołu do góry.

• Order - Korzystając z Flexbox, możesz zmienić kolejność zawartości strony internetowej.

• Wrap - W przypadku niespójnego miejsca na zawartość strony internetowej (w jednym wierszu), można je zawinąć w wiele wierszy (zarówno w poziomie), jak i w pionie.

• Alignment - Korzystając z Flexbox, możesz wyrównać zawartość strony internetowej w odniesieniu do jej kontenera.

• Resize - Korzystając z Flexbox, możesz zwiększyć lub zmniejszyć rozmiar elementów na stronie, aby zmieścić się w dostępnej przestrzeni.

Obsługiwane przeglądarki

Poniżej znajdują się przeglądarki obsługujące Flexbox.

• Chrome 29+
• Firefox 28+
• Internet Explorer 11+
• Opera 17+
• Safari 6.1+
• Android 4.4+
• iOS 7.1+