justify-content
Properti CSS justify-content menyelaraskan item flex ketika item tidak menggunakan semua ruang yang tersedia pada
sumbu utama (horizontal) dari wadah fleksibel (flex container).
Ini dilakukan setelah setiap panjang item flex dan margin otomatis telah diselesaikan.
Biasanya properti ini membantu mendistribusikan sisa ruang bebas tambahan ketika semua item flex berada di garis yang tidak fleksibel, atau fleksibel tetapi telah mencapai ukuran maksimumnya.
Properti ini juga memberikan beberapa kontrol atas perataan item ketika mereka meluap dari baris.
CSS Syntax
justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit;
JavaScript Syntax
object.style.justifyContent="space-between"
| Default value: | flex-start |
|---|---|
| Inherited: | tidak |
| Animatable: | tidak Read about animatable |
| Version: | CSS3 |
Attribute Value
none
justify-content: flex-start;
Item flexbox/grid didorong ke arah awal sumbu utama flex/grid container.
justify-content: flex-end;
Item flexbox/grid didorong ke arah ujung sumbu utama flex/grid container.
justify-content: center;
Item flexbox/grid dipusatkan di sepanjang sumbu utama flex/grid container.
justify-content: space-between;
Ruang yang tersisa didistribusikan di antara item-item flexbox/grid.
justify-content: space-around;
Ruang yang tersisa didistribusikan di sekitar item flexbox/grid: ini menambah ruang sebelum item pertama dan setelah yang terakhir.