Codingku

align-content

Properti align-content merupakan bagian sub-property dari module Flexible Box.

Properti ini mengontrol penyelarasan kotak konten sepanjang sumbu silang/blok di dalam kotak kontennya.

Penyelarasan ini mirip dengan bagaimana justify-content menyelaraskan item individual. Namun align-content menyelaraskan konten seluruh baris.

Properti align-content meluruskan garis fleksibel dalam wadah fleksibel multi-garis ketika ada ruang tambahan di sumbu silang.

Properti ini hanya berpengaruh jika ada beberapa baris item flexbox/grid.

Untuk membuat container fleksibel multi-baris, terapkan property flex-wrap: wrap atau flex-wrap: wrap-reverse.

Syntax

align-content: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit;

/* Default value */
.flex-container {
align-content: stretch;
}

Javascript Syntax

object.style.alignContent="center"

default align-content: stretch;

Setiap baris akan direntangkan hingga mengisi ruang yang tersisa.

Pada contoh ini, tinggi wadahnya 300px . Semua tinggi kotak 50px , kotak yang kedua tingginya 100px .

  • Baris pertama tingginya 100px
  • Baris kedua tingginya 50px
  • Ruang tersisa tingginya 150px

Ruang yang tersisa ini didistribusikan secara merata di antara dua garis:

  • Baris pertama sekarang tingginya 175px
  • Baris kedua sekarang tingginya 125px

align-content: flex-start;

Setiap baris hanya akan mengisi ruang yang dibutuhkan . Mereka semua akan bergerak menuju awal dari poros silang kotak fleksibel/grid.

align-content: flex-end;

Setiap baris hanya akan mengisi ruang yang dibutuhkan . Mereka semua akan bergerak menuju akhir dari poros silang kotak fleksibel/grid.

align-content: center;

Setiap baris hanya akan mengisi ruang yang dibutuhkan . Mereka semua akan bergerak menuju ke tengah dari sumbu silang flexbox/grid.

align-content: space-between;

Setiap baris hanya akan mengisi ruang yang dibutuhkan . Ruang tersisa akan muncul antara kedua baris.

align-content: space-around;

Setiap baris hanya akan mengisi ruang yang dibutuhkan . Ruang tersisa akan didistribusikan secara merata di sekitar baris: sebelum baris pertama, antara keduanya, dan setelah yang terakhir.