Yayasan 6: Grid Flex Baru

Grid Flex Yayasan 6: Sistem susun atur berasaskan flexbox yang kuat

Yayasan 6 memperkenalkan grid Flex yang berubah-ubah, memanfaatkan kuasa Flexbox untuk mewujudkan reka bentuk web yang responsif dan kompleks. Walau bagaimanapun, sistem lanjutan ini memerlukan pertimbangan keserasian pelayar; Ia tidak sesuai dengan pelayar warisan seperti IE8 dan IE9.

Ciri -ciri dan Pertimbangan Utama

:

• Komponen pilihan: Grid Flex tidak didayakan secara lalai. Ia direka sebagai pengganti untuk grid standard, dan kedua -duanya tidak boleh digunakan serentak kerana nama kelas yang bertindih (, .row). .column
• Kawalan yang dipertingkatkan: Mudah menguruskan urutan elemen, penjajaran mendatar dan menegak, dan aspek susun atur lain. Buat pelbagai grid, masing -masing dengan susun atur yang unik, untuk kawalan berbutir.
• Sokongan penyemak imbas: pergantungannya pada flexbox bermaksud keserasian dengan penyemak imbas moden sahaja. Sokongan penyemak imbas warisan memerlukan melekat dengan grid standard.

Melaksanakan grid flex: untuk pengguna SASS, ubah suai

:

app.scss

Untuk membina tersuai, pilih grid Flex semasa proses penyesuaian.

<code class="language-scss">// @include foundation-grid;
@include foundation-flex-grid;</code>

Penggunaan Asas:

susun atur 3-kolumn yang sederhana:

Pesanan elemen:

<code class="language-html"><div class="row">
  <div class="column small-12 medium-6 large-4">Column 1</div>
  <div class="column small-12 medium-6 large-4">Column 2</div>
  <div class="column small-12 medium-6 large-4">Column 3</div>
</div></code>

Flexbox memudahkan penyusunan semula elemen. Gunakan atau

untuk pesanan khusus peranti:

order-{value} {size}-order-{value} Pesanan khusus peranti:

<code class="language-html"><div class="row">
  <div class="column order-2">Second</div>
  <div class="column order-1">First</div>
</div></code>

<code class="language-html"><div class="row">
  <div class="column small-order-1 medium-order-2">Small: First, Medium: Second</div>
  <div class="column small-order-2 medium-order-1">Small: Second, Medium: First</div>
</div></code>

Alignment:

Mudah memusatkan kandungan secara mendatar dan menegak menggunakan kelas seperti , , dan lain -lain, digunakan untuk sama ada

atau individu

elemen. Sebagai contoh, item menu yang sama rata: align-center align-middle .row .column sistem grid sass yang disemak semula:

<code class="language-html"><div class="row align-spaced">
  <div class="column small-3">Home</div>
  <div class="column small-3">About</div>
  <div class="column small-3">Contact</div>
</div></code>

Yayasan 6 meningkatkan mixin grid terasnya, yang membolehkan definisi grid berganda dengan jumlah lajur yang berbeza -beza. Ini membolehkan susun atur yang sangat disesuaikan:

Kesimpulan:

<code class="language-scss">.row-listing {
  @include grid-row(18) {
    .primary { @include grid-column(10); }
    .secondary { @include grid-column(4); }
    .tertiary { @include grid-column(4); }
  }
}</code>

Grid Flex Yayasan 6 menawarkan fleksibiliti dan kawalan yang lebih baik ke atas susun atur berbanding dengan pendahulunya. Jika sokongan penyemak imbas Legacy bukanlah kekangan, ia adalah pendekatan yang disyorkan untuk pembangunan yang diselaraskan dan reka bentuk yang boleh disesuaikan. Mixin grid Sass yang dipertingkatkan lagi memberi kuasa kepada pemaju dengan sistem grid yang sangat disesuaikan.

Atas ialah kandungan terperinci Yayasan 6: Grid Flex Baru. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!