justify-content
Pelajaran 7 dari 15 dalam kursus CSS Flexbox: Kursus Lengkap di Coddy.
Property justify-content menentukan perataan sepanjang sumbu utama.
Sumbu utama berarah horizontal untuk arah row dan vertikal untuk arah column.
Property ini menerima enam nilai:
flex-start- meratakan item ke awal container.flex-end- meratakan item ke akhir container.center- meratakan item ke tengah container.space-between- item didistribusikan secara merata pada sumbu. Item pertama berada di awal, item terakhir berada di akhir.space-around- item didistribusikan secara merata pada sumbu dengan ruang yang sama di sekelilingnya.space-evenly- item didistribusikan sehingga jarak antara setiap dua item (dan jarak ke tepi) sama.
Nilai default container flex adalah flex-start.
Contoh,
.container {
display: flex;
justify-content: flex-end;
}
Tantangan
MudahTetapkan perataan di sepanjang sumbu utama flexbox yang diberikan menjadi space-between.
Kamu sebaiknya mencoba semua nilainya!
Coba sendiri
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>Semua pelajaran di CSS Flexbox: Kursus Lengkap
2Kontainer Flex
Flexboxflex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-contentgapTepat di TengahLatihan sendiri: Playground Web