https://wiki.rettungsdienstblog.eu/api.php?action=feedcontributions&feedformat=atom&user=TeodoroVillalobo 2026-11-15T20:21:58Z Benutzerbeiträge MediaWiki 1.37.1 https://wiki.rettungsdienstblog.eu/index.php?title=Flex_shrink_kurczy_element_mimo_szeroko%C5%9Bci,_gdy_zapomnisz_o_tym_jednym&diff=497780 2026-10-19T18:07:41Z

<p>TeodoroVillalobo: Die Seite wurde neu angelegt: „Jak uniknąć typowych pułapek z flex-basis w procentach Pamiętaj, że flex-basis współpracuje z flex-grow i flex-shrink. Gdy ustawisz flex-basis: 25% dla czterech elementów, suma da 100%, ale marginesy, padding i obramowania mogą spowodować przepełnienie. Domyślnie box-sizing: content-box wlicza padding i border do szerokości całkowitej, więc elementy mogą się zawijać lub ściskać. Rozwiązanie: ustaw globalnie box-sizing: border-box lub…“</p> <hr /> <div>Jak uniknąć typowych pułapek z flex-basis w procentach Pamiętaj, że flex-basis współpracuje z flex-grow i flex-shrink. Gdy ustawisz flex-basis: 25% dla czterech elementów, suma da 100%, ale marginesy, padding i obramowania mogą spowodować przepełnienie. Domyślnie box-sizing: content-box wlicza padding i border do szerokości całkowitej, więc elementy mogą się zawijać lub ściskać. Rozwiązanie: ustaw globalnie box-sizing: border-box lub dodaj flex-shrink: 0, jeśli chcesz wymusić stały rozmiar.&lt;br&gt;&lt;br&gt;Przy flex-wrap: wrap procenty odnoszą się do szerokości kontenera, ale po zawinięciu nowy wiersz może mieć inną dostępną szerokość. Wtedy elementy z flex-basis: 50% mogą nie zmieścić się obok siebie i spowodować nieoczekiwane łamanie. Jeśli chcesz mieć pewność, użyj calc() z odejmowaniem odstępów, np. flex-basis: calc(50% - 10px), i pamiętaj o gap. Dzięki temu unikniesz błędów zaokrągleń i niepożądanych przeniesień.&lt;br&gt;&lt;br&gt;Zanim ustawisz flex-basis: 30%, sprawdź, czy rodzic ma określoną szerokość. Procenty potrzebują punktu odniesienia. Jeśli kontener jest elementem inline lub ma szerokość auto bez zdefiniowanego rozmiaru, przeglądarka może potraktować procenty jako zero lub wartość nieokreśloną. W efekcie elementy nie rozłożą się zgodnie z oczekiwaniem. Ustaw szerokość rodzica (np. width: 100%, max-width) albo użyj jednostek viewportu, jeśli chcesz uniezależnić się od rodzica.&lt;br&gt;&lt;br&gt;Ustawianie flex-basis w procentach wydaje się proste: element ma zająć np. 50% szerokości kontenera. W praktyce procenty odnoszą się nie do szerokości rodzica, lecz do jego rozmiaru wzdłuż osi głównej. Jeśli kontener ma flex-direction: row, osią główną jest szerokość, więc 50% oznacza połowę szerokości. Gdy zmienisz kierunek na column, oś główna to wysokość i 50% odniesie się do wysokości kontenera. To najczęstsze źródło błędów.&lt;br&gt;&lt;br&gt;Kiedy marginesy faktycznie się zapadaj&lt;br&gt;&lt;br&gt;Typowy błąd to ustawianie min-width i liczenie, że ochroni element. Działa, ale tylko do wartości, którą wpiszesz. Gdy kontener jest węższy niż suma minimów, elementy i tak się nie zmieszczą. Przy obrazkach i polach formularzy pomaga też min-width: 0 na rodzicu — bez tego długi tekst potrafi rozpychać układ inaczej, niż przewidujesz. Warto sprawdzić, czy problem nie leży wtedy w treści, a nie w samym flexie.&lt;br&gt;&lt;br&gt;Ostatnia rzecz: procentowe flex-basis liczy się względem szerokości kontenera, a nie jego zawartości. Przy paddingach i gap procenty potrafią dać sumę większą niż 100%, co kończy się zawijaniem. Bezpieczniej używać calc() albo wartości stałych z flex-grow. Testuj układ przy bardzo długiej i bardzo krótkiej treści — dopiero wtedy widać, czy auto rzeczywiście działa, czy tylko przypadkiem wygląda dobrze na przykładowych danych.&lt;br&gt;&lt;br&gt;Stała wartość bywa jedynym sposobem na przewidywalny układ przy kartach produktów, panelach bocznych i formularzach. Wtedy warto pamiętać o flex-wrap: wrap, żeby przy węższym ekranie elementy przechodziły do nowej linii zamiast się ściskać. Kolejny błąd to mieszanie flex-basis z width w tym samym elemencie. Width zostanie nadpisane przez flex-basis, ale tylko wtedy, gdy flex-basis nie jest auto. Przy auto width nadal działa. Dlatego przed debugowaniem układu sprawdź w narzędziach deweloperskich, którą wartość faktycznie widzi przeglądarka — przekreślone width to znak, że flex-basis wygrało.&lt;br&gt;&lt;br&gt;Identyfikator, zapisywany znakiem #, np. #naglowek, musi być unikalny na całej stronie. Używa się go, gdy dany element występuje tylko raz i ma szczególne znaczenie, np. główny kontener layoutu albo pojedynczy formularz. Identyfikator ma większą wagę w kaskadzie niż klasa, więc łatwo nim przypadkowo nadpisać inne style. To główna przyczyna problemów z identyfikatorami w większych projektach.&lt;br&gt;&lt;br&gt;Element ma ustawione width: 400px, a mimo to na ekranie jest węższy. Kursor zatrzymuje się na nim, a szerokość w narzędziach deweloperskich pokazuje mniejszą wartość. To nie błąd przeglądarki — to domyślne zachowanie flexboxa. Każdy element będący dzieckiem kontenera z display: flex dostaje na starcie flex-shrink: 1, nawet jeśli nigdzie tego nie zapisano. Szerokość bazowa to tylko punkt wyjścia, nie twardy limit.&lt;br&gt;&lt;br&gt;Kolejny problem to zawartość. Flex-basis określa rozmiar początkowy, ale jeśli w elemencie jest długi tekst lub obraz, może on rozepchnąć układ. Wtedy flex-shrink zmniejszy elementy proporcjonalnie, ale nie zawsze zgodnie z planem. Aby temu zapobiec, stosuj min-width: 0 na elementach flex lub dodawaj overflow: hidden. Warto też testować w różnych przeglądarkach, bo interpretacja procentów w flex-basis bywała niespójna w starszych wersjach.&lt;br&gt;&lt;br&gt;Selektor znacznika to po prostu nazwa elementu HTML, np. p, h1 czy ul. Styluje wszystkie wystąpienia danego znacznika na stronie. Sprawdza się przy ustawieniach globalnych: krojach pisma, marginesach domyślnych czy kolorach bazowych. Problem pojawia się, gdy chcesz zmienić wygląd tylko jednego akapitu. Wtedy selektor znacznika zmieni wszystkie akapity, a ty zaczniesz ratować sytuację nadpisywaniem stylów w kolejnych miejscach.</div>

TeodoroVillalobo https://wiki.rettungsdienstblog.eu/index.php?title=Benutzer:TeodoroVillalobo&diff=497779 2026-10-19T18:07:39Z

<p>TeodoroVillalobo: Die Seite wurde neu angelegt: „Entuzjasta aranżacji wnętrz z wieloletnią praktyką. Dzielę się tym, jak łączyć wygodę z ładnym wnętrzem. Najchętniej opisuję proste rozwiązania, które da się zrobić samemu.“</p> <hr /> <div>Entuzjasta aranżacji wnętrz z wieloletnią praktyką. Dzielę się tym, jak łączyć wygodę z ładnym wnętrzem. Najchętniej opisuję proste rozwiązania, które da się zrobić samemu.</div>

TeodoroVillalobo