CSS Flexbox

CSS Flexbox

---

Pada kesempatan kali ini saya akan membagikan beberapa trik css yaitu dengan Flexbox.
Flexbox merupakan property pada css yang digunakan untuk mengatur jarak, posisi ataupun urutan  container ataupun item.

Pada penjelsan pertama yaitu :

• Display: Flex

Biasanya pada display css kita menggunakan block | inline | inline-block, pada kali ini ada suatu trik yaitu flex, berikut saya sertakan gambar nya.

display :flex;

• Flex-direction: collumn;

• Flex-wrap:wrap;

• Justify-content: center;

• Align-content: center;

Property ini berfungsi untuk mengatur posisi content. berikut saya sertakan contohnya:

• Align-self: flex-end;

Property ini befungsi untuk mengatur posisi item atau container pada posisi horizontal sumbu.

• Order: 3 | 2 | 1 | 4;

Property ini berfungsi mengatur urutan suatu item atau container dengan syarat item atau container lain diberi ukuran.Contoh dari item 1, 2, 3, 4 diganti menjadi 4, 3, 2, 1.

• Flex-grow: 3

Flex grow berfungsi untuk memberi lebar pada suatu item atau container dengan syarat suatu item atau container juga diberi ukuran.

Contoh nya :

Untuk mencoba flexbox anda bisa mencoba contoh yang saya buat, seperti dibawah ini.

Sekian sedikit tutorial mengenai flexbox.

Semoga bermanfaat, Terima kasih.