Od Chrome 123 możesz używać właściwości align-content z wyrównania pola CSS w układach bloków i tabel. Pozwoli to wyrównać kierunek bloków bez konieczności tworzenia układu elastycznego lub siatki. Konieczna może być jednak aktualizacja CSS, jeśli używasz interfejsu align-content poza tymi metodami układu, ponieważ ta zmiana zacznie obowiązywać.
Obsługa przeglądarek
- 123
- 123
- 125
- 17,4
align-content w układzie elastycznym i siatkowym
Prawdopodobnie korzystasz z usługi align-content do wyrównywania elementów elastycznych lub ścieżek siatki. W układzie elastycznym do wyrównywania elementów na osi krzyżowej używana jest właściwość align-content w kontenerze elastycznym. W przykładzie poniżej ma ona wartość space-between, więc rozdziela dostępne miejsce w kontenerze elastycznym między wierszami elastycznymi.
align-content wyrównuje wiersze z elementami elastycznymi, ponieważ kontener elastyczny ma wystarczającą ilość miejsca na osi przekrojowej.Wyśrodkowanie elementu w pionie
Parametr align-content przydaje się szczególnie do wyśrodkowania elementu w pionie wewnątrz kontenera. Aby to zrobić, użyj klawiszy display: flex oraz align-content: center. W ten sposób element staje się elementem elastycznym i ma zastosowanie inne domyślne zachowanie tego typu. W poniższym przykładzie nagłówek jest wyśrodkowany w pionie dzięki atrybutowi align-content: center, przez co element kurczy się, aby zmieścił się w treści. Dlatego musisz zastosować do niego tag flex-grow: 1.
align-content wyśrodkowuje nagłówek w pionie w kontenerze elastycznym.Wykorzystując align-content w układzie blokowym, możesz uzyskać wyrównanie w pionie bez konieczności tworzenia układu elastycznego, aby obiekt działał. Nie są potrzebne żadne dodatkowe właściwości, ponieważ pozostaje on elementem blokowym. Jedyną zmianą jest wyrównanie.
align-content wyśrodkowuje nagłówek w pionie w obrębie kontenera blokowego (wymaga przeglądarki Chrome 123 lub Safari w wersji 17.4 lub nowszej).Przetestuj obsługę elementu align-content w układach bloków
Niestety nie można przetestować obsługi interfejsu align-content w układzie blokowym. Ponieważ funkcja align-content jest od dawna obsługiwana w układzie elastycznym i siatkowym, użycie zapytań cech z elementem @supports zawsze będzie zwracać wartość „prawda”. To ta sama sytuacja, która miała miejsce w przypadku właściwości gap we Flexbox. Grupa robocza ds. usług porównywania cen szuka rozwiązania częściowego wdrożenia takich jak te.
Sprawdź, czy witryny nie są wyrównane
Właściwość align-content jest zdefiniowana od wielu lat w specyfikacji do pracy nad układami bloków. Żadna przeglądarka nie obsługiwała align-content poza tymi kontekstami, więc nic nie stało. Jeśli jednak dodasz właściwość do elementu, który nie jest kontenerem elastycznym ani siatki, będzie ona działać od wersji Chrome 123. W razie potrzeby wyszukaj w swojej usłudze porównywania cen użycie atrybutu align-content i w razie potrzeby przetestuj swoje witryny i aplikacje w wersji beta.