Przejdź do treści

Generator Flexbox CSS — układ z podglądem

Ustaw kierunek, wyrównanie, zawijanie i odstępy elementów, zobacz układ na żywo i skopiuj gotowy kod CSS.

    
  

    

    Umieść to narzędzie na swojej stronie
    

      
Bezpłatnie, bez rejestracji. Widżet pokazuje na dole napis „Narzędzie udostępnia AMKBIT.pl”.

      

        
        
        
        
      

      

      
      
Strona demonstracyjna

      
    

  

      

    
Oś główna i poprzeczna


justify-content rozkłada elementy wzdłuż osi głównej, a align-items wzdłuż poprzecznej. Przy flex-direction: column osie zamieniają się rolami.


Najczęstsze układy


  • wyśrodkowanie: justify-content: center; align-items: center,
  • menu: justify-content: space-between,
  • karty: flex-wrap: wrap i gap.
        
Przykłady

    
Wyśrodkowanie
Ustaw center w obu osiach.

            
Najczęstsze pytania

    
Flexbox czy Grid?
Flexbox jest wygodny dla układów w jednym kierunku, a Grid dla dwuwymiarowych siatek.

            
Poradniki

    
Programowanie i tworzenie stronFlexbox w CSS — podstawy i gotowe układyJak działają osie, kiedy użyć justify-content i align-items oraz jak szybko zrobić menu, karty i wyśrodkowanie.Programowanie i tworzenie stronCSS Grid — podstawy i gotowe układy stronCzym jest siatka, jak działa jednostka fr i jak bez media queries zbudować responsywną galerię kart.

        
Wynik ma charakter pomocniczy. Przy ważnych decyzjach (finansowych, technicznych, zdrowotnych) sprawdź go niezależnie. Zasady korzystania.