Właściwość CSSFlexbox
column-gap
Ustawia odstęp między kolumnami w kontenerze flex, grid lub wielokolumnowym.
- Wartość domyślna
normal- Dziedziczona
- Nie
- Animowalna
- tak, jako długość lub procent
- Dotyczy
- kontenery flex, grid i wielokolumnowe
- JavaScript
element.style.columnGap = "24px"
Przykład
#CSS
.article {
columns: 2;
column-gap: 32px;
}HTML przykładu
<div class="article stage">Tekst podzielony na dwie kolumny jak w gazecie. Odstęp między kolumnami ustawia column-gap. Dłuższe akapity same przepływają z pierwszej kolumny do drugiej, bez żadnego dodatkowego kodu.</div>Podgląd
Definicja i zastosowanie
#Właściwość column-gap określa odstęp między kolumnami, czyli w poziomie przy zwykłym kierunku pisania. We Flexboxie to odstęp między elementami w jednej linii.
Działa też w układzie wielokolumnowym (columns), gdzie domyślna wartość normal oznacza odstęp równy 1em. W Flexboxie i Gridzie normal oznacza zero.
Starsza nazwa grid-column-gap nadal jest obsługiwana jako alias, ale nowy kod powinien używać column-gap.
Składnia
#Składnia
column-gap: normal | <długość> | <procent>;Wartości
#Wartości w praktyce
#normal
We Flexboxie oznacza brak odstępu.
.demo { column-gap: normal; }10px
Mały odstęp między kolumnami.
.demo { column-gap: 10px; }40px
Duży odstęp między kolumnami.
.demo { column-gap: 40px; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- W tekstach wielokolumnowych daj kolumnom wyraźny odstęp, co najmniej 2em, żeby oko nie przeskakiwało do sąsiedniej kolumny.
- Do osobnych odstępów w obu osiach użyj skrótu
gap: <wiersze> <kolumny>.
Powiązane hasła
#- gapUstawia odstępy między elementami w kontenerze flex, grid i wielokolumnowym.
- row-gapUstawia odstęp między wierszami w kontenerze flex lub grid.
- grid-template-columnsDefiniuje kolumny siatki: ich liczbę i szerokości.
- columnsDzieli treść elementu na kolumny jak w gazecie. Skrót dla column-width i column-count.
Widzisz błąd albo brakuje przykładu? Napisz do nas.