Berkelan dengan CSS flexbox


Flexible Boxes  CSS3, atau flexbox, adalah mode tata letak yang dimaksudkan untuk mengakomodasi berbagai ukuran layar dan perangkat display yang berbeda. Untuk banyak aplikasi, model kotak fleksibel lebih mudah daripada model blok karena tidak menggunakan pelampung, juga margin pelampung flex runtuh dengan margin isinya.

Banyak perancang menemukan flexbox lebih mudah digunakan daripada kotak. Tanpa banyak kerja, div sering naik ke bagian atas halaman saat desainer tidak menginginkannya --- jadi misalnya, menempelkan footer ke bagian bawah halaman itu sulit. Lebar dan tinggi flexbox bervariasi untuk menyesuaikan diri dengan ruang tampilan, menahan elemen bawah di tempat. Logika Flexbox juga bertanya apakah Anda ingin div's diraih ke kanan atau di bagian bawah. Urutan tampilan elemen flexbox tidak tergantung pada urutan kode sumbernya.

Tata letak yang populer dapat dicapai dengan lebih mudah dan dengan kode yang lebih bersih. Independensi ini sengaja hanya mempengaruhi rendering visual, meninggalkan perintah ucapan dan navigasi berdasarkan pembacaan linear sumber HTML.

Konsep Kotak Fleksibel


Dia mendefinisikan aspek tata letak flex adalah kemampuan untuk mengubah lebar dan / atau tinggi itemnya agar sesuai dengan ruang yang tersedia pada perangkat display manapun. Sebuah wadah fleksibel memperluas item untuk mengisi ruang kosong yang tersedia, atau mengecilkannya untuk mencegah luapan.

Tata letak blok secara vertikal bias; Tata letak inline bias secara horizontal. Tata letak Flexbox juga mengizinkan. Sementara tata letak blok bekerja dengan baik untuk halaman, tidak nyaman untuk komponen aplikasi yang harus mengubah orientasi, mengubah ukuran, meregangkan, atau menyusut saat agen pengguna berubah, telepon beralih dari orientasi vertikal ke horizontal, dan sebagainya. Layout Flexbox bagus pada layout skala kecil, sedangkan layout Grid (muncul) ditujukan untuk layout skala besar. Keduanya merupakan bagian dari upaya Kelompok Kerja CSS yang lebih luas untuk menyediakan interoperabilitas aplikasi web yang lebih baik dengan agen pengguna yang berbeda, mode penulisan yang berbeda, dan tuntutan lainnya.

Flexible Boxes Vocabulary

Alih-alih berbicara tentang kotak horisontal (inline) dan vertikal (blok), fleksibel menggunakan sumbu utama dan poros silang. Jika flex-direction adalah kolom, maka vertical akan menjadi poros utama dan horizontal akan menjadi sumbu silang. Perhatikan diagram berikut. Ini menunjukkan wadah fleksibel yang memiliki arah garis lurus, yang berarti bahwa item flex saling mengikuti secara horizontal melintasi sumbu utama.
Berkenalan dengan flexbox CSS3


Wadah Flex

Elemen induk di mana item flex terkandung. Penampung fleksibel didefinisikan dengan menggunakan nilai flex atau inline-flex dari properti display.

Item Flex
Setiap anak dari wadah flex menjadi barang yang flex. Teks yang langsung terkandung dalam wadah flex terbungkus dalam item flex anonim.

Sumbu
Setiap layout kotak fleksibel mengikuti dua sumbu. Sumbu utama adalah poros sepanjang item flex saling mengikuti. Sumbu silang adalah sumbu tegak lurus terhadap poros utama.

  • Properti flex-direction membentuk sumbu utama.
  • Properti justify-content mendefinisikan bagaimana item flex diletakkan di sepanjang sumbu 
  • Item align-item mendefinisikan default untuk bagaimana item flex diletakkan di sepanjang sumbu silang pada baris saat ini.
  • utama pada baris saat ini.Properti align-self mendefinisikan bagaimana item flex tunggal disejajarkan pada sumbu silang, dan menimpa default yang ditetapkan oleh item align.
Directions

Ujung start / main utama dan sisi start / cross end dari kontainer flex menggambarkan asal dan ujung aliran item flex. Mereka mengikuti sumbu utama dan sumbu silang wadah flex pada vektor yang ditetapkan oleh mode penulisan (kiri ke kanan, kanan ke kiri, dll.).
  • Properti pesanan memberi elemen ke grup ordinal dan menentukan elemen mana yang muncul terlebih dahulu.
  • Properti flex-flow melengkapi sifat flex-direction dan flex-wrap untuk meletakkan item flex.
Lines



Item flex dapat diletakkan pada satu baris atau beberapa baris sesuai dengan properti flex-wrap, yang mengendalikan arah sumbu silang dan arah di mana garis-garis baru ditumpuk.



Dimensi



Relevan agnostik item flex tinggi dan lebar adalah ukuran utama dan ukuran silang, yang masing-masing mengikuti poros utama dan sumbu silang wadah flex.

  • Nilai awal properti min-height dan min-width adalah 0.
  • Properti flexipendorong flex-grow, flex-shrink, dan flex-basis properties untuk menetapkan fleksibilitas item flex.
Properti Flexbox


Properti tidak mempengaruhi kotak fleksibel

Karena kotak fleksibel menggunakan algoritma tata letak yang berbeda, beberapa properti tidak masuk akal pada wadah fleksibel:


  • Kolom- * sifat dari beberapa modul kolom tidak berpengaruh pada item flex.
  • Jelas tidak berpengaruh pada item flex.
  • float menyebabkan properti tampilan elemen untuk dihitung untuk dicekal.
  • vertical-align tidak berpengaruh pada pelurusan item flex.

Contoh

Beriku ini contoh penggunaan flexbox :





<html lang="en">
  <head>
    
    <style>
    .flex {
        /* basic styling */
        width: 350px;
        height: 200px;
        border: 1px solid #555;
        font: 14px Arial;

        /* flexbox setup */
        display: flex;
        flex-direction: row;
    }

    .flex > div {
        flex: 1 1 auto;
        width: 30px; /* Untuk membuat transisi bekerja dengan baik. (Transisi ke / dari
                         "width: auto" adalah kereta di Gecko dan Webkit, setidaknya.
                         Lihat http://bugzil.la/731886 untuk informasi lebih lanjut.) * /
         transisi: lebar 0.7s mudah-habis;
    }

    /* colors */
    .flex > div:nth-child(1){ background: #009246; }
    .flex > div:nth-child(2){ background: #F1F2F1; }
    .flex > div:nth-child(3){ background: #CE2B37; }

    .flex > div:hover {
        width: 200px;
    }
   
    </style> 
  </head>
  <body>
    Flexbox nuovo


    <div class="flex">
      <div>
uno</div>
<div>
due</div>
<div>
tre</div>
</div>
</body>
</html>
Nah cukup sekian pengenalan css flexboxnya sampai jumpa di artikel- artikel berikunya.

Subscribe to receive free email updates:

0 Response to "Berkelan dengan CSS flexbox"

Post a Comment