5 zasad flexboxa, które wyjaśniają kontener i oś główną

W małym projekcie nie trzeba od razu przepisywać wszystkiego. Wystarczy wprowadzić BEM w nowych komponentach i stopniowo poprawiać stare przy okazji edycji. Warto trzymać się jednej zasady: jeśli klasa nie mówi, do czego należy, zmień jej nazwę. Po miesiącu pracy różnica jest odczuwalna — kod czyta się szybciej, a nowe osoby w projekcie nie muszą zgadywać, który styl za co odpowiada.

Mały projekt ma to do siebie, że przez pierwsze tygodnie wszystko wygląda niewinnie. Kilka widoków, jeden arkusz stylów, klasy typu box i title. Problem pojawia się po miesiącu, gdy trzeba dodać nowy widok i okazuje się, że title jest już użyty w trzech miejscach i za każdym razem wygląda inaczej. Wtedy zaczyna się nadpisywanie stylów przez kolejne selektory i praca staje się koszmarem. BEM rozwiązuje ten problem bez wprowadzania narzędzi i konfiguracji.

Oś poprzeczna to prostopadła do głównej. W trybie row biegnie pionowo, w trybie column — poziomo. To właśnie dlatego align-items: center raz działa w pionie, a raz w poziomie. Zanim dodasz jakąkolwiek właściwość, ustal, gdzie jest oś główna. Wypisz sobie na kartce: row — oś pozioma, column — oś pionowa. Dopiero potem sięgaj po justify-content i align-items. Bez tego będziesz losowo przełączać wartości i dziwić się, że nic nie działa.

Na koniec warto pamiętać o różnicy między kontenerem flex a zwykłym blokiem. Jeśli element ma być blokiem w klasycznym sensie, czyli zajmować całą szerokość i zaczynać nową linię po sobie, nie umieszczaj go w kontenerze flex bez potrzeby. Czasem wystarczy zwykły display: block i brak flexa na rodzicu. Gdy jednak flex jest konieczny, kontroluj flex-wrap, flex-basis i min-width. Te trzy właściwości rozwiązują większość problemów z utratą nowej linii i pozwalają przewidzieć, gdzie faktycznie trafi element blokowy.

Po ustawieniu kontenera jego bezpośrednie dzieci stają się elementami flex. Nie musisz nadawać im żadnych właściwości, żeby zaczęły się układać w poziomie. Domyślnie ustawiają się w jednej linii od lewej do prawej. Jeśli któreś dziecko ma własny display, np. block, to i tak staje się elementem flex i traci część swoich nawyków. Uwaga na marginesy: w kontenerze flex marginesy pionowe nie zlewają się tak jak w zwykłym przepływie, więc odstępy mogą wyglądać inaczej niż się spodziewasz.

Elementy ustawione jako inline-block zachowują się jak znaki w wierszu tekstu, ale nie zawsze siadają tak, jak się tego oczekuje. Domyślnie ich dolna krawędź jest wyrównywana do linii bazowej tekstu, meble na wymiar a nie do dolnej krawędzi wiersza. W praktyce oznacza to, że pod elementem pojawia się kilkupikselowy odstęp, którego nie widać w kodzie i który potrafi rozjechać układ strony.

Flexbox zaczyna się od jednej decyzji: który element ustawiasz jako kontener. To na nim ustawiasz display: flex, a nie na jego dzieciach. Kontener to rodzic, który porządkuje bezpośrednie elementy potomne. Jeśli wpiszesz display: flex na niewłaściwym elemencie, cała układanka się rozjedzie. Najczęstszy błąd: dodanie flexa do elementu, który ma tylko jedno dziecko — wtedy nic ciekawego się nie stanie, bo nie ma czego ustawiać w rzędzie.

Osobną kwestią jest zawijanie tekstu wewnątrz elementu blokowego. Flex potrafi ścisnąć dziecko poniżej jego naturalnej szerokości, jeśli brakuje miejsca. Wtedy tekst zaczyna się łamać w dziwnych miejscach, a wysokość elementu rośnie. Rozwiązaniem jest ustawienie min-width: 0 na dzieciach flexa, co pozwala im się kurczyć, albo flex-shrink: 0, jeśli mają zachować swoją szerokość. Bez tego długie wyrazy potrafią rozepchnąć cały układ i zaburzyć nowe linie w sąsiednich elementach.

Zanim sięgniesz po flexboxa, sprawdź, czy problem faktycznie dotyczy linii bazowej. W narzędziach deweloperskich włącz podświetlanie wierszy – zobaczysz, gdzie kończy się linia bazowa, a gdzie dolna krawędź wiersza. Dopiero wtedy zdecyduj, czy wystarczy vertical-align, czy potrzebna jest zmiana modelu układu. Pamiętaj też, że różne przeglądarki mogą mieć minimalne różnice w metryce fontów, więc to, co wygląda dobrze lokalnie, nie zawsze będzie identyczne wszędzie.

Typowe błędy to dodawanie ujemnego marginesu w dół, żeby „naprawić" odstęp. Działa to przypadkowo i psuje się przy zmianie fontu lub rozmiaru tekstu. Drugi częsty błąd to ustawianie line-height: 0 na kontenerze – usuwa odstęp, ale łamie wyświetlanie tekstu wewnątrz elementów potomnych. Trzeci to mieszanie inline-block z float, co prowadzi do nieprzewidywalnego układu i konieczności czyszczenia pływania.

Każdy element HTML ma domyślny sposób uczestniczenia w układzie strony. Trzy najczęstsze wartości to block, inline i inline-block. Od nich zależy, czy element łamie linię, czy stoi w niej obok sąsiadów, jak traktuje szerokość i wysokość oraz jak działa na niego padding i margin. Zanim zaczniesz przesuwać coś marginesem, sprawdź, jaki display faktycznie ma ten element — to oszczędza pół godziny zgadywania.

In case you loved this informative article and you want to receive details regarding https://lebenskunst.berlin assure visit our own internet site.