Fungsi justify-content space-between dan align-items css html

Bayangkan lagi menambah satu elemen baru di web, dan dalam elemen itu perlu 3 kolom. Untuk membuat rapi, kiri kanan tengah dan sebagainya, perlu banyak tambah ini itu.

Namun dengan menggunakan justify-content: space-between, akan membuat beberapa elemen/bagian kecil dalam suatu elemen terbagi merata secara rapi dengan sendiri nya.

Merah align-items, hijau justify-conten: space-between

Cara Pemggunaannya;

.footer {
}
.footer .fbox {
  display: flex;
  justify-content: space-between;
}
 .fbox {
  align-items: center;
  }
.lfotr {
}
.mfotr {
}
.rfotr {
}
  
<footer class="footer">
  <div class="fbox">
    <div class="lfotr">
    </div>
    <div class="mfotr">
    </div>
    <div class="rfotr">
    </div>
  </div>
</footer>
  

Ini bisa membuat desain jadi cepat, lebih solid dan rapi. Daripada menggunakan margin untuk menggeser yang kurang ke atas, atau kurang kebawah, terlalu kekiri atau kekanan misalnya.

Tentang Author

St

Dikirim pada -30 Sep 2023
" Selamat datang, selamat membaca dan selamat berseluncur "

San Tuy

Share ke

Lainnya oleh Santuy :