Gdy flex-basis walczy z width, sprawdź, co wygrywa w layoucie

2026-10-19T18:00:24Z

GingerArmitage5: Die Seite wurde neu angelegt: „W wielu układach opartych na flexboxie dochodzi do sytuacji, w której element ma jednocześnie ustawione width i flex-basis. Wtedy przeglądarka musi rozstrzygnąć, która wartość określa jego rozmiar początkowy. Domyślnie wygrywa flex-basis, ale tylko wtedy, gdy jest różny od auto. To znaczy, że jeśli napiszesz flex-basis: 200px, a obok width: 300px, element zacznie od 200px, a width zostanie zignorowane w obliczeniach wstępnych. Wartość w…“

W wielu układach opartych na flexboxie dochodzi do sytuacji, w której element ma jednocześnie ustawione width i flex-basis. Wtedy przeglądarka musi rozstrzygnąć, która wartość określa jego rozmiar początkowy. Domyślnie wygrywa flex-basis, ale tylko wtedy, gdy jest różny od auto. To znaczy, że jeśli napiszesz flex-basis: 200px, a obok width: 300px, element zacznie od 200px, a width zostanie zignorowane w obliczeniach wstępnych. Wartość width nadal istnieje, ale staje się drugorzędna — chyba że flex-basis wynosi właśnie auto. Justify-content służy do rozłożenia wolnej przestrzeni wzdłuż osi głównej. Przyjmuje wartości flex-start, flex-end, center, space-between, space-around i space-evenly. Działa tylko wtedy, gdy w kontenerze jest wolne miejsce. Jeśli elementy wypełniają całą szerokość lub wysokość, żadna z tych wartości nie zmieni ich położenia. To drugi typowy błąd: ktoś ustawia space-between na kontenerze, w którym elementy mają flex: 1, i dziwi się, że nie widzi różnicy. Sprawdź, czy dzieci nie rozciągają się na całą dostępną przestrzeń, zanim zaczniesz szukać winy w przeglądarce. Pamiętaj też, że flex-basis nie nadpisuje width w sensie usunięcia — po prostu wygrywa w obliczeniach rozmiaru bazowego. Wartość width może wciąż działać jako ograniczenie, gdy element nie jest rozciągany, albo gdy używasz min-width i max-width. Dlatego zamiast zastanawiać się, „co jest ważniejsze", lepiej jawnie określić, czy element ma być sztywny, czy elastyczny, i konsekwentnie używać jednej właściwości do rozmiaru bazowego. Praktyczna zasada jest prosta: jeśli chcesz, aby element miał stały rozmiar niezależny od rozmieszczenia, ustaw flex: 0 0 auto i podaj width lub height. Gdy potrzebujesz elastyczności z punktem startowym, użyj flex-basis i nie dubluj go przez width. A jeśli debugujesz layout i nie wiesz, co wygrywa, sprawdź w narzędziach deweloperskich, czy flex-basis nie jest przypadkiem równy 0 — to najczęstsza przyczyna „znikających" szerokości. Kiedy width przejmuje kontrolę Gdy flex-basis: auto, przeglądarka sięga po width. To najczęstszy przypadek, bo auto jest wartością domyślną. Wtedy width działa jak rozmiar bazowy, a flex-grow i flex-shrink mogą go później modyfikować. Warto o tym pamiętać, bo wpisanie flex: 1 (co rozwija się do flex: 1 1 0) ustawia flex-basis na 0, więc width przestaje mieć jakiekolwiek znaczenie. To właśnie źródło wielu zdziwień: element ma width: 250px, a i tak kurczy się do zera i rozciąga równo z rodzeństwem. Inny częsty błąd to łączenie width z flex-basis w różnych jednostkach. Gdy flex-basis: 50% i width: 300px, procent odnosi się do rozmiaru kontenera, a piksele do stałej wartości. W zależności od szerokości rodzica raz wygrywa jedno, raz drugie — ale tylko wizualnie, bo formalnie i tak decyduje flex-basis. Mieszanie jednostek bez zrozumienia kontekstu prowadzi do układów, które psują się przy zmianie rozmiaru okna. Jest jeszcze jeden niuans: flex-basis działa wzdłuż osi głównej. W kontenerze z flex-direction: row to szerokość, ale przy flex-direction: column — wysokość. Wtedy width przestaje być konkurencją, a jego miejsce zajmuje height. Jeśli więc przenosisz ten sam komponent między układ poziomy i pionowy, musisz sprawdzić, czy flex-basis nie nadpisuje teraz innej właściwości, niż się spodziewasz. Pierwszy krok to diagnoza. Otwórz narzędzia deweloperskie, zaznacz kontener i sprawdź, czy między elementami pojawia się odstęp, którego nie ma w CSS. Wartość często wynosi kilka pikseli i zależy od rozmiaru oraz kroju fontu użytego w kontenerze. Zmiana font-size na zero ukrywa problem tylko pozornie — dziedziczenie potrafi zepsuć wygląd tekstu wewnątrz elementów, więc to rozwiązanie wymaga przywrócenia rozmiaru czcionki w każdym dziecku. Działa, ale bywa kłopotliwe w utrzymaniu. Zanim dwuklik zadziała, sprawdź, czy plik naprawdę nazywa się index.html, a nie index.html.txt. Systemy często ukrywają rozszerzenia znane, więc w edytorze tekstu zapiszesz „index.html", a otrzymasz „index.html.txt". Wtedy dwuklik otworzy notatnik albo edytor, nie przeglądarkę. Włącz wyświetlanie rozszerzeń w opcjach folderów i popraw nazwę. Druga pułapka to brak przypisania: jeśli .html nie jest skojarzone z żadną przeglądarką, system zapyta, czym otworzyć plik — wybierz przeglądarkę i zaznacz opcję stałego przypisania. Jeśli chcesz mieć pewność, że otwierasz właściwy plik, przeciągnij go z folderu na okno przeglądarki albo skopiuj ścieżkę i wklej ją do paska adresu. Po każdej zmianie w kodzie zapisz plik i odśwież stronę skrótem klawiszowym. Gdy strona wygląda inaczej niż w internecie, sprawdź konsolę błędów przeglądarki — pokaże, których plików nie udało się wczytać. Pamiętaj też, że plik lokalny nie jest widoczny dla innych osób w sieci; to tylko kopia na twoim dysku.

Benutzer:GingerArmitage5

2026-10-19T18:00:22Z

GingerArmitage5: Die Seite wurde neu angelegt: „Entuzjasta urządzania mieszkań z wieloletnią praktyką. Piszę o tym, jak urządzić mieszkanie w bloku bez remontu generalnego. Najchętniej opisuję pomysły, które nie rujnują budżetu.“

Entuzjasta urządzania mieszkań z wieloletnią praktyką. Piszę o tym, jak urządzić mieszkanie w bloku bez remontu generalnego. Najchętniej opisuję pomysły, które nie rujnują budżetu.

Rettungsdienst-Wiki - Benutzerbeiträge [de]

Gdy flex-basis walczy z width, sprawdź, co wygrywa w layoucie

Benutzer:GingerArmitage5