CSS Flexbox

 CSS Flexbox

menggunakan CSS untuk memposisikan elemen dengan cara yang fleksibel.Menempatkan properti CSS display: flex;pada suatu elemen memungkinkan Anda menggunakan properti flex lainnya untuk membangun halaman responsif. (klo posisi diatur ke flex nanti bakal nyari posisi sendiri, ga usah di susun lgi).

Anda melakukannya dengan menambahkan properti flex-directionke item induk dan menyetelnya ke baris atau kolom. Membuat baris akan menyelaraskan anak secara horizontal, dan membuat kolom akan menyelaraskan anak secara vertikal.

Pilihan lainnya untuk flex-directionadalah row-reversedan column-reverse.

Catatan: Nilai default untuk flex-directionproperti adalah row. Contoh (flex-direction dgn nilai row-reverse):

flex-direction:row-reverse;

(membalikkan)




flex-direction:column;

(berjajar vertikal

* Posisi= justify-content yg umum pakai opsi center. Beberapa opsi justify-content :

• flex-start: menyelaraskan item ke awal wadah fleksibel. Untuk baris, ini mendorong item ke kiri wadah. Untuk kolom, ini mendorong item ke atas wadah. Ini adalah penyelarasan default jika tidak justify-contentditentukan.
• flex-end: menyelaraskan item ke bagian akhir wadah fleksibel. Untuk baris, ini akan mendorong item ke kanan wadah. Untuk kolom, ini akan mendorong item ke bagian bawah wadah.
• space-between: menyelaraskan item ke bagian tengah sumbu utama, dengan ruang ekstra ditempatkan di antara item. Item pertama dan terakhir didorong ke tepi wadah fleksibel. Misalnya, dalam satu baris, item pertama berada di sisi kiri wadah, item terakhir berada di sisi kanan wadah, lalu ruang yang tersisa didistribusikan secara merata di antara item lainnya.
• space-around: serupa dengan space-betweentetapi item pertama dan terakhir tidak terkunci di tepi wadah, ruang didistribusikan di sekitar semua item dengan setengah ruang di kedua ujung wadah fleksibel.
• space-evenly: Mendistribusikan ruang secara merata di antara item fleksibel dengan spasi penuh di kedua ujung wadah fleksibel.

* Properti align-itemsini mirip dengan justify-content. Ingat bahwa justify-contentproperti menyelaraskan item flex di sepanjang sumbu utama. Untuk baris, sumbu utama adalah garis horizontal dan untuk kolom adalah garis vertikal.

Nilai-nilai berbeda yang tersedia untuk align-itemsmeliputi:

• flex-start: menyelaraskan item ke awal wadah fleksibel. Untuk baris, ini menyelaraskan item ke bagian atas wadah. Untuk kolom, ini menyelaraskan item ke kiri wadah.
• flex-end: menyelaraskan item ke bagian akhir wadah fleksibel. Untuk baris, ini menyelaraskan item ke bagian bawah wadah. Untuk kolom, ini menyelaraskan item ke bagian kanan wadah.
• center: meratakan item ke tengah. Untuk baris, ini akan meratakan item secara vertikal (ruang yang sama di atas dan di bawah item). Untuk kolom, ini akan meratakannya secara horizontal (ruang yang sama di kiri dan kanan item).
• stretch: regangkan item untuk mengisi wadah fleksibel. Misalnya, baris item diregangkan untuk mengisi wadah fleksibel dari atas ke bawah. Ini adalah nilai default jika tidak ada align-itemsnilai yang ditentukan.
• baseline: menyelaraskan item dengan garis dasarnya. Garis dasar adalah konsep teks, anggap saja sebagai garis tempat huruf-huruf berada.

*Namun, penggunaan flex-wrapproperti tersebut memberi tahu CSS untuk membungkus item. Ini berarti item tambahan akan dipindahkan ke baris atau kolom baru. Titik henti tempat pembungkusan terjadi bergantung pada ukuran item dan ukuran wadah.

CSS juga memiliki opsi untuk arah pembungkusan:

• nowrap: ini adalah pengaturan default, dan tidak membungkus item.
• wrap: membungkus item ke dalam beberapa baris dari atas ke bawah jika berada dalam
• baris dan dari kiri ke kanan jika berada dalam kolom.
• wrap-reverse: membungkus item ke dalam beberapa baris dari bawah ke atas jika berada dalam baris dan dari kanan ke kiri jika berada dalam kolom.

*Yang pertama adalah flex-shrinkproperti. Saat digunakan, properti tersebut memungkinka

n item menyusut jika wadah fleksibel terlalu kecil. Item menyusut saat lebar wadah induk lebih

kecil dari gabungan lebar semua item fleksibel di dalamnya.

Properti ini flex-shrinkmenggunakan angka sebagai nilai. Semakin tinggi angkanya, semakin menyusut benda tersebut dibandingkan dengan benda lain dalam wadah. Misalnya, jika satu benda memiliki nilai flex-shrinkdan 1benda lain memiliki flex-shrinknilai 3, benda yang memiliki nilai 3akan menyusut tiga kali lebih banyak daripada benda lainnya.

*Kebalikan dari flex-shrinkadalah flex-growproperti. Ingat bahwa flex-shrinkmengontrol ukuran item saat wadah menyusut. flex-growProperti mengontrol ukuran item saat wadah induk mengembang.

Menggunakan contoh serupa dari tantangan terakhir, jika satu item memiliki nilai flex-growdan 1yang lain memiliki flex-grownilai 3, item dengan nilai 3akan tumbuh tiga kali lipat dari yang lain.

*Properti flex-basismenentukan ukuran awal item sebelum CSS membuat penyesuaian dengan flex-shrinkatau flex-grow.

Satuan yang digunakan oleh flex-basisproperti sama dengan properti ukuran lainnya ( px, em, %, dst.). Nilai tersebut automengukur item berdasarkan konten.

*Tersedia pintasan untuk menyetel beberapa properti flex sekaligus. Properti flex-grow, flex-shrink, dan flex-basissemuanya dapat disetel bersamaan dengan menggunakan flexproperti tersebut.

Misalnya, flex: 1 0 10px;akan menetapkan item ke flex-grow: 1;, flex-shrink: 0;, dan flex-basis: 10px;.

Pengaturan properti default adalah flex: 0 1 auto;.

*Properti ini orderdigunakan untuk memberi tahu CSS urutan kemunculan item flex di wadah flex. Secara default, item akan muncul dalam urutan yang sama dengan kemunculannya di HTML sumber. Properti ini menggunakan angka sebagai nilai, dan angka negatif dapat digunakan.

*Properti terakhir untuk item fleksibel adalah align-self. Properti ini memungkinkan Anda untuk menyesuaikan perataan setiap item secara individual, alih-alih mengaturnya sekaligus. Ini berguna karena teknik penyesuaian umum lainnya yang menggunakan properti CSS float, clear, dan vertical-aligntidak berfungsi pada item fleksibel.

align-selfmenerima nilai yang sama align-itemsdan akan mengesampingkan nilai apa pun yang ditetapkan oleh align-itemsproperti.

Subscribe to receive free email updates: