Twórz idealne układy flexboxów
Wizualizuj, dostosowuj i generuj kod flexbox CSS za pomocą naszego intuicyjnego interfejsu typu "przeciągnij i upuść".
Właściwości kontenera
Właściwości elementu
Preview
.flex-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch; } .flex-item { /* Default item styles */ flex: 0 1 auto; order: 0; align-self: auto; }
Popularne ustawienia Flexbox
Wyśrodkuj poziomo i pionowo
Idealny do wyśrodkowania logo, przycisku lub dowolnego elementu zarówno w poziomie, jak i w pionie.
Równe odstępy
Utwórz równe odstępy między elementami z odstępem między lub odstępem dookoła.
Menu pionowe
Zbuduj menu nawigacji pionowej ze spójnymi odstępami i wyrównaniem.
Responsywna siatka
Utwórz responsywny układ siatki, który zawija elementy na podstawie dostępnego miejsca.
Sztandar bohatera
Główny tytuł
Sekcja bohatera z wezwaniem do działania
Zaprojektuj baner bohatera z tytułem, podtytułem i przyciskiem wezwania do działania.
Układ stopki
Company
About Us
Careers
Support
Centrum pomocy
Skontaktuj się z nami
© Generator Flexbox 2023
Zbuduj responsywną stopkę z kolumnami, które układają się na mniejszych ekranach.
Przykłady z życia wzięte
Pasek nawigacyjny
Typowy układ paska nawigacyjnego z logo po lewej stronie, elementami menu pośrodku i ikoną koszyka po prawej stronie.
Card Grid
Tytuł karty
Tekst opisu karty tutaj
Tytuł karty
Tekst opisu karty tutaj
Tytuł karty
Tekst opisu karty tutaj
Responsywna siatka kart, która dostosowuje się do różnych rozmiarów ekranu za pomocą właściwości flexboxa.
Układ artykułu
Tytuł artykułu
Dodał(a) 1 stycznia, 2023 · Przeczytasz w 5 minut
Treść artykułu tutaj. Może to być krótkie podsumowanie lub pełny tekst artykułu. Flexbox pomaga wyrównać obraz i tekst w atrakcyjny wizualnie sposób.
Typowy układ artykułu z obrazem po lewej stronie i treścią tekstową po prawej, ułożony na urządzeniach mobilnych.
Układ deski rozdzielczej
Układ pulpitu nawigacyjnego z nagłówkiem, paskiem bocznym, głównym obszarem zawartości i stopką wykorzystujący flexbox do wyrównania w poziomie i pionie.
Podstawy Flexbox
Co to jest Flexbox?
Flexible Box Layout, powszechnie znany jako Flexbox, to model układu CSS3, który zapewnia efektywny sposób rozdzielania i wyrównywania przestrzeni między elementami w kontenerze, nawet jeśli ich rozmiar jest nieznany lub dynamiczny.
The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes).
Kluczowe pojęcia:Flexbox wprowadza dwie główne koncepcje:Kontener elastyczny and the Elementy elastyczne. Kontener jest elementem nadrzędnym, a elementy są jego bezpośrednimi elementami podrzędnymi.
Oś główna a oś krzyżowa
Układy flexbox są oparte na dwóch osiach:main axis and the Oś krzyżowa.
-
Oś główna:Oś główna, wzdłuż której są rozmieszczane elementy gięcia. Zdefiniowany przez
flex-direction. - Oś krzyżowa:Oś prostopadła do osi głównej. Jego kierunek zależy od kierunku osi głównej.
Właściwości kontenera
| Property | Description |
|---|---|
display |
Definiuje kontener elastyczny; w linii lub bloku w zależności od podanej wartości. |
flex-direction |
Ustanawia oś główną, definiując w ten sposób kierunek, w którym elementy flex są umieszczane w kontenerze flex. |
flex-wrap |
Domyślnie wszystkie elementy flex będą próbowały zmieścić się w jednej linii. Możesz to zmienić i zezwolić na zawijanie elementów zgodnie z potrzebami za pomocą tej właściwości. |
justify-content |
Wyrównuje elementy elastycznego formatu wzdłuż głównej osi bieżącego wiersza kontenera elastycznego. |
align-items |
Wyrównuje elementy elastycznego formatu wzdłuż osi poprzecznej bieżącego wiersza kontenera elastycznego. |
align-content |
Wyrównuje linie kontenera flex do wewnątrz, gdy w osi poprzecznej jest dodatkowe miejsce. |
Właściwości elementu
| Property | Description |
|---|---|
order |
Domyślnie elementy flex są układane w kolejności źródłowej. Jednakżeordersteruje kolejnością, w jakiej pojawiają się one w kontenerze flex. |
flex-grow |
Określa zdolność elementu elastycznego do powiększania w razie potrzeby. Przyjmuje wartość niemianowaną, która służy jako proporcja. |
flex-shrink |
Określa możliwość zmniejszania elementu elastycznego w razie potrzeby. |
flex-basis |
Definiuje początkowy rozmiar elementu elastycznego przed rozmieszczeniem dostępnej przestrzeni zgodnie ze współczynnikami elastyczności. |
align-self |
Zezwala na wyrównanie domyślne (lub określone przezalign-items), który ma być nadpisywany dla poszczególnych elementów elastycznego dostępu do energii. |
Related Tools
Twórz idealne układy flexboxów
Wizualizuj, dostosowuj i generuj kod flexbox CSS za pomocą naszego intuicyjnego interfejsu typu "przeciągnij i upuść".
Konwerter rysika na CSS
Przekształć swój kod SCSS w CSS. Szybko, łatwo i bezpiecznie.
Konwerter SCSS na CSS
Transform your SCSS code into CSS. Fast, easy, and secure.
HMAC Generator
Łatwe generowanie skrótów HMAC
Konwertuj tekst na ślimaki przyjazne dla SEO
Przekształć dowolny tekst w przyjazny dla adresów URL slug, który jest idealny dla adresów URL, nazw plików i nie tylko.
Walidator JSON
Weryfikuj, formatuj i debuguj dane JSON z precyzją. Otrzymuj natychmiastowe informacje zwrotne na temat błędów składniowych i problemów z formatowaniem.