Property css apakah yang digunakan untuk membuat garis pada sepanjang batas sebuah elemen html?

Dalam desain web tidak menutup kemungkinan kita memberikan border/garis pembatas pada blok/bagian /elemen tertentu. Properti border memungkinkan kita untuk menentukan warna (color), gaya (style), dan lebar (width) border dalam satu properti.

Flex (flexibel) adalah salah satu super power display dari CSS3. Memungkinkan untuk pengaturan layout, posisi dan tampilan dari suatu konten yang ukurannya belum diketahui atau bernilai dinamis. Oleh sebab itu, nilai ini dinamakan Flex diambil dari kata flexibel yang berarti mudah diatur, disesuaikan dan ditukar-tukar.

Flex sangat cocok digunakan untuk komponen sebuah aplikasi dan layout skala kecil. Tujuan utama penggunaan layout flex adalah untuk memberi kemampuan container agar dapat memanipulasi item-item (elemen) yang ada didalamnya, baik itu merubah tinggi dan lebar, urutan posisi elemen, dan spasi (jarak) diantara elemen tersebut.

Secara garis besar flex dibagi menjadi dua :

Pada bagian ini flex container bertindak sebagai parent. Terdapat beberapa nilai yang dapat diatur pada flex container, diantaranya :

Pengaturan display flex dilakukan pada container. Terdapat dua value display, yaitu flex (block) dan inline-flex (inline).

Digunakan untuk mengatur arah alur dari items yang ada pada container flex. Default valuenya row. Terdapat empat nilai :

Flex-flow merupakan shorthand dari flex-direction dan flex-wrap properti.

flex-flow: <’flex-direction’> || <’flex-wrap’>

Justify-content digunakan untuk mensejajarkan setiap items yang ada pada flex container, agar container tersebut bisa mendistribusikan ruang kosong yang tersisa ketika item flex dalam satu baris tersebut tidak flexsibel atau meskipun flexsibel tapi sudah mencapai batas ukuran maksimum.

Pengaturan justify-content berdasarkan pada sumbu-x atau pengaturan items secara horizontal.

• flex-start (default): item dimulai dari awal (kiri / kanan sesuai flex-direction)
• flex-end: item dimulai dari akhir (kiri / kanan sesuai flex-direction)
• centert: item berpusat ditengah-tengah di sepanjang garis container flex
• space-between: item merata dalam container; item pertama ada di garis awal, item terakhir di garis akhir
• space-around: item didistribusikan secara merata di dalam container flex dengan ruang yang sama di sekitar mereka.
• space-evenly: item didistribusikan sehingga jarak antara dua item (dan ruang ke tepi) sama.

Align-items hampir sama dengan konsep justify-content hanya saja pada align-items, item-item flex diatur berdasarkan sumbu-y atau sepanjang garis tegak-lurus atau secara vertikal.

• flex-start: margin tepi cross-start item ditempatkan pada garis cross-start (rata atas) container.
• flex-end: margin tepi cross-end dari item ditempatkan pada garis cross-end (rata bawah) container.
• center: item berpusat pada sumbu silang (ditengah) container.
• baseline: item sejajar seperti garis dasar text mereka sejajar.
• stretch (default): peregangan untuk mengisi kontainer (tetap mengutamakan nilai min-width / max-width)

Algin-content memadukan konsep align-items dan justify-content dimana digunakan untuk mensejajarkan garis flex container ketika ada ruang kosong secara garis tegak lurus pada sumbu-y. Antar items menggunakan konsep align items dan antar line menerapkan konsep justify-content.

• flex-start: baris dimulai dari awal container
• flex-end: baris dimulai dari akhir container
• center: baris yang diletakkan pada tengah container
• space-between: baris terdistribusi merata; Baris pertama ada di awal container sementara yang terakhir ada di bagian akhir
• space-around: baris merata didistribusikan dengan ruang yang sama di sekitar setiap baris
• stretch (default): baris peregangan untuk mengambil ruang yang tersisa

Property align-content tidak dapat diterapkan jika item-item flex terdiri hanya satu line.

Flex Items

Flex item merupakan item atau content yang ada dalam sebuah flex container maka dinamakan sebagai flex item. Ada beberapa hal yang dapat diatur dan disesuaikan pada suatu flex items.

Order digunakan untuk mengatur urutan dari flex-item, secara default nilai order adalah 1. Namun kita dapat menyesuaikan nilai tersebut sesuai dengan kebutuhan kita.

Flex-grow mendefinisikan kemampuan item flex untuk bertambah ukurannya jika memungkinkan ukuran pada container yang tersedia. Value dari flex-grow tidak memiliki satuan yaitu berupa integer yang berfungsi sebagai proposisi. Nilai ini akan menentukan jumlah ruang yang tersedia dalam wadah flex yang dapat diambil oleh item tersebut.

Default nilai flex-grow = 0;

Pada gambar tersebut, Value flex-grow untuk box 8 bernilai 1, box 1 bernilai 2 dan box lain sesuai dengan default. Sehingga box 8 mengambil ruang items satu kali lebih banyak dari yang lain dan box 1 mengambil ruang items sebanyak 2 kali lebih banyak.

Note: flex-grow hanya berlaku pada container flex dan tidak dapat digunakan pada nilai inline-flex.

Kebalikan dari flex-grow, flex-shrink memiliki kemampuan untuk melakukan penyusutan/pengurangan ukuran item flex jika ukuran container flex tidak mencukupi.

Default flex-shrink: 1;

Dari contoh diatas dapat kita lihat bahwa box 1 dan box 2 mengalami pengurangan ukuran width. Hal ini dikarenakan pada box 1 diterapkan nilai flex-shrink sebanyak 3 dan box 2 bernilai 2. Dikarenakan lebar container flex tidak mencukupi untuk semua box sehingga ukuran box 1 dan box 2 secara langsung menyesuaikan diri mengurangi ukuran lebar karena nila flex-shrink telah diatur pada kedua item tersebut.

Flex-basis digunakan untuk mengatur ukuran lebar dari item flex bernilai sama dengan nilai width.

Default value flex-basis: auto;

Flex merupakan shorthand dari flex-grow, flex-shrink dan flex-basis.

flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ]

Align-self merupakan pengaturan tersendiri dari item flex dari nilai align-items yang diterapkan pada container flex. Value pada align-self sama dengan yang ada pada align-items. Namun ini akan lebih spesifik berakibat pada item flex tertentu saja.

Apa itu Border pada CSS?

Apa yang dimaksud Border Style?

Apa itu Border Radius?

Apa itu border bottom?