Hello guys! Bootstrap merupakan salah satu Framework CSS yang paling terkenal dan sering digunakan. Kali ini kita akan membuat Auto Margins dalam Bootstrap.
Sumber : Getbootstrap.com
Flexbox bisa melakukan hal-hal yang cukup hebat saat Anda mencampurkan penyejajaran fleksibel dengan margin otomatis. Berikut ini adalah tiga contoh pengendalian item fleksibel melalui margin otomatis: default (tanpa margin otomatis), mendorong dua item ke kanan (.mr-auto), dan mendorong dua item ke kiri (.ml-auto).
Sayangnya, IE10 dan IE11 tidak mendukung margin otomatis dengan benar pada item fleksibel yang parent-nya memiliki nilai justify-content yang bukan default. Lihat Jawaban StackOverflow ini untuk lebih banyak detail.
<div class="d-flex"><div class="p-2">Flex item</div><div class="p-2">Flex item</div><div class="p-2">Flex item</div></div><div class="d-flex"><div class="mr-auto p-2">Flex item</div><div class="p-2">Flex item</div><div class="p-2">Flex item</div></div><div class="d-flex"><div class="p-2">Flex item</div><div class="p-2">Flex item</div><div class="ml-auto p-2">Flex item</div></div>
a. Dengan Align-Item
Anda dapat memindahkan satu item fleksibel ke bagian atas atau bawah wadah dengan mencampur align-items, flex-direction: column, dan margin-top: auto atau margin-bottom: auto.
<div class="d-flex"><div class="p-2">Flex item</div><div class="p-2">Flex item</div><div class="p-2">Flex item</div></div><div class="d-flex"><div class="mr-auto p-2">Flex item</div><div class="p-2">Flex item</div><div class="p-2">Flex item</div></div><div class="d-flex"><div class="p-2">Flex item</div><div class="p-2">Flex item</div><div class="ml-auto p-2">Flex item</div></div>
Mohon maaf apabila ada kesalahan sedikit pun pada Kode Program ini.
Terima Kasih ššššš :)