Obsługa wyrównywania treści w układach bloków i tabel.

Rachel Andrew

Od wersji 123 Chrome możesz używać właściwości align-content z CSS do wyrównywania elementów w bloku i tabeli. Dzięki temu będzie można wyrównywać bloki bez konieczności tworzenia układu elastycznego ani siatki. Jeśli jednak używasz align-content poza tymi metodami układu, może być konieczne zaktualizowanie kodu CSS, ponieważ teraz ta metoda zacznie działać.

Browser Support

• 123
• 123
• 125
• 17.4

align-content w układach elastycznych i siatki

Prawdopodobnie do wyrównania elementów flex lub ścieżek siatki użyto align-content. W układzie flex właściwości align-content jest używana w kontenerze flex, aby wyrównać elementy flex względem osi poprzecznej. W poniższym przykładzie ma ona wartość space-between, więc rozmieszcza dostępne miejsce w kontenerze flex między wierszami flex.

Właściwość align-content rozmieszcza rzędy elementów flex, ponieważ kontener flex ma wolne miejsce na osi poprzecznej.

Wyśrodkowanie elementu w pionie

Funkcja align-content jest szczególnie przydatna do wyśrodkowania elementu w pionie w kontenerze. Aby to zrobić, użyj atrybutu display: flex z atrybutem align-content: center. W efekcie element staje się elementem flex, a wchodzą też w życie inne domyślne zachowania elementów flex. W tym przykładzie nagłówek jest wyrównany pionowo za pomocą atrybutu align-content: center, co powoduje, że element zmniejsza się, aby dopasować się do zawartości. Dlatego musisz zastosować do niego atrybut flex-grow: 1.

Właściwość align-content wyrównuje nagłówek w pionie w kontenerze flex.

Dzięki temu, że align-content jest dostępna w przypadku układu blokowego, możesz uzyskać wyrównanie pionowe bez konieczności tworzenia układu elastycznego dla danej usługi. Nie musisz dodawać żadnych dodatkowych właściwości, ponieważ element pozostaje elementem bloku. Jedyną zmianą jest wyrównanie.

Właściwość align-contentwyśrodkowuje nagłówek w pionie w bloku kontenera (wymaga Chrome 123 lub Safari 17.4 lub nowszej).

Testowanie obsługi align-content w schematach bloków

Niestety nie można przetestować obsługi align-content w układzie blokowym. Ponieważ align-content jest od dawna obsługiwana w układzie elastycznym i siatkowym, korzystanie z zapytań dotyczących funkcji z użyciem @supports zawsze zwraca wartość true. To jest ta sama sytuacja, która miała miejsce w przypadku właściwości gap w flexbox. Grupa robocza CSS rozważa rozwiązanie dla częściowych implementacji, takich jak ta.

Sprawdź, czy w Twoich witrynach nie ma nieoczekiwanego wyrównania

Właściwość align-content jest od wielu lat zdefiniowana w specyfikacji jako element układu bloku. Ponieważ żadna przeglądarka nie obsługiwała align-content poza tymi kontekstami, nic się nie stało. Jeśli jednak usługa została dodana do czegoś, co nie jest elastycznym lub siatkowym kontenerem, zacznie działać od wersji 123 Chrome. Przeszukaj kod CSS pod kątem użycia align-content i użyj wersji beta, aby przetestować swoje witryny i aplikacje, jeśli to konieczne.