Layout dengan flex di Bootstrap

 Layout dengan flex di Bootstrap


Pengetian Display Flex

      Display flex atau d-flex adalah properti CSS yang mengaktifkan flexbox, yaitu modul tata letak kotak fleksibel. Fungsi display flex adalah untuk mengatur layout, posisi, dan tampilan konten dengan ukuran yang belum diketahui atau bernilai dinamis

contoh tanpa menggunakan d-flex


Menggunakan d-flex

Display Inline Flex

Display inline-flex adalah deklarasi tampilan CSS yang membuat flex-container berperilaku seperti elemen level inline. Dengan begitu, elemen inline lainnya, seperti tombol, dapat mengalir di sampingnya. 

contoh:


Row Direction

    Row direction adalah properti CSS yang menentukan arah baris atau kolom dari elemen flex.
beberapa contohnya yaitu flex-row dan flex-row-reverse.

contoh:
bagian atas merupakan flex-row, dan yang bawah merupakan contoh flex-row-reverse

Column Direction

    Column direction adalah pengaturan tata letak elemen dalam sebuah flex container dengan menggunakan properti flex-direction. Ketika nilai flex-direction diatur ke column, elemen-elemen flex akan disusun secara vertikal dari atas ke bawah. Sebaliknya, jika diatur ke column-reverse, elemen-elemen akan disusun dari bawah ke atas.

contoh dari column direction yaitu:
  • flex-column : untuk mengatur arah vertikal
  • flex-column-reverse : untuk memulai arah vertikal dari sisi yang berlawanan
contoh: 

Justify Content

    Justify-content adalah properti CSS yang digunakan dalam konteks Flexbox dan Grid untuk mengatur penyelarasan item di sepanjang sumbu utama (main axis). Ini sangat berguna ketika elemen dalam container tidak mengisi seluruh ruang yang tersedia, sehingga memungkinkan distribusi ruang di antara atau di sekitar elemen.

Contoh dari justify content yaitu:
  • justify-content-start : Mengatur item untuk berada di awal container.
  • justify-content-end : Mengatur item untuk berada di akhir container.
  • justify-content-center : Mengatur item agar berada di tengah container.
  • justify-content-between : Mengatur ruang di antara item sehingga ada jarak yang sama antara setiap item, dengan item pertama berada di awal dan item terakhir di akhir.
  • justify-content-around : Mengatur ruang di sekitar item, memberikan jarak yang sama sebelum, antara, dan setelah setiap item.
  • justify-content-evenly : Mengatur ruang secara merata di sekitar setiap item, termasuk ruang yang sama di awal dan akhir container.
contoh:


Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar HTML Dasar Part 5 - Pembahasan Link, Relative dan Absolute URL, Bookmark di HTML

Gambar
Pembahasan Link, Relative dan Absolute URL, Bookmark di HTML Pengetian Link Link dalam HTML adalah bagian dari web development yang berfungsi untuk menghubungkan satu halaman dengan halaman lain atau ke website lain. Link HTML juga dikenal sebagai hyperlink, link HTML dapat berupa teks, gambar, atau elemen HTML lainnya. Tag a Untuk membuat link HTML, Anda bisa membungkus teks atau konten lain di dalam elemen <a> dan menggunakan atribut href yang berisi lokasi tujuan link tersebut, Tag a juga memiliki attribute target yang digunakan sebagai target jendela Web Browser, kita bisa gunakan nilai target=”_self”, artinya halaman akan ditampilkan di halaman yang sama, ini adalah bawaan default, kemudian target=”_blank”, artinya halaman akan ditampilkan di jendela baru di Browser, Tag a juga memiliki attribute title, untuk menuliskan judul yang keluar ketika mouse berada di atas Link tersebut Absolute URL Saat kita menulis halaman tujuan dari href di Link, kita bisa menggunakan absolute U...
Baca selengkapnya

CSS Dasar

Gambar
 CSS DASAR      CSS adalah singkatan dari Cascading Style Sheets yang merupakan bahasa pemrograman yang digunakan untuk mengatur tampilan dan format website.      CSS memiliki beberapa fungsi, di antaranya: Membuat tampilan website lebih menarik, Memisahkan konten dari tampilan visual website, Membuat tampilan website rapi dan optimal di berbagai ukuran layar, Memudahkan pengelolaan kode, Mempercepat loading halaman web. Inline CSS Inline CSS adalah metode menambahkan CSS langsung ke dalam elemen HTML Contoh: Internal CSS Berbeda dengan inline CSS yang diterapkan di elemen individu, internal CSS ditempatkan di dalam tag < style > yang berada di bagian < head > dari dokumen HTML Contoh: Eksternal CSS External CSS adalah metode di mana kamu menyimpan semua CSS rule dalam sebuah file terpisah dengan ekstensi .css dan menghubungkannya dengan halaman HTML menggunakan elemen < link > yang berapada di <head> contoh: Komment di CSS K...
Baca selengkapnya

Belajar Flex Box di HTML

Gambar
 Belajar Flex Box di HTML Pengertian Flexbox      Flexbox adalah sebuah konsep layout atau mode pengaturan dalam CSS yang digunakan untuk mengatur elemen atau container beserta item di dalamnya pada halaman web, Flexbox memungkinkan pengaturan layout, posisi, dan tampilan dari suatu konten yang ukurannya belum diketahui atau bernilai dinamis, nama Flexbox diambil dari kata flexibel yang berarti mudah diatur, disesuaikan, dan ditukar-tukar. Latihan 1. Flex Wrap     Buat file latihanflexbox.html dan style.css     Hasil untuk flex-wrap : wrap     tampilan akan turun kebawah jika jendela diperkecil      Hasil untuk  flex-wrap : nowrap           Dengan nowrap, semua item flex akan mencoba untuk menyesuaikan diri dalam satu baris atau kolom. Jika ruang tidak cukup, item-item akan mengecil dan menyesuaikan diri.      Hasil untuk  flex-wrap : wrap-reverse      ...
Baca selengkapnya