Kolumny Flexbox o równej szerokości — generator CSS
Zbuduj wizualnie układ flexbox CSS: kierunek elastyczny, justowanie zawartości, wyrównanie elementów, elastyczne zawijanie i przerwa w kontenerze, a także elastyczny wzrost dla każdego dziecka, elastyczne kurczenie i elastyczna podstawa, wszystko z podglądem na żywo i kopiowalnym CSS.
Wynik
Ta strona otwiera generator z funkcją flex-grow: 1 jest już ustawiona we wszystkich trzech polach podglądu. Obserwuj je: zamiast kurczyć się, aby dopasować się do zawartości, każde pudełko zajmuje identyczną część pozostałego miejsca w wierszu, co stanowi cały przepis na elastyczne kolumny o równej szerokości — bez procentowych szerokości, bez funkcji calc(), bez obliczeń matematycznych o stałych pikselach, aby zachować synchronizację.
flex-grow: 1 nakazuje dziecku rosnąć, a ustawienie go na każdym dziecku w rzędzie oznacza, że wszystkie urosną w tym samym stopniu, więc ostatecznie będą miały tę samą szerokość, niezależnie od tego, ile ich jest i jaka zawartość się w nich znajduje. Dodaj lub usuń pole z poniższymi elementami sterującymi, a pozostałe kolumny zostaną natychmiast rozłożone tak, aby pozostały takie same — zmień rozmiar okna przeglądarki nad tym układem w środowisku produkcyjnym, a zachowa się w ten sam sposób.
Jest to wzór stojący za siatkami kart o równej wysokości, kolumnami tabeli cen i równomiernie podzielonymi sekcjami stopki. Daj jednej kolumnie więcej miejsca, podnosząc jej flex-grow nad pozostałe, lub skopiuj poniższy blok CSS dokładnie tak, jak został wygenerowany, aby uzyskać czysty równy podział.