Selamat siang teman!



Berikut adalah panduan lembar contekan visual lengkap untuk semua properti Modul CSS Grid dan Flexbox.



Sumber utama: Panduan Lengkap untuk Flexbox , Panduan Lengkap untuk Grid .



Di akhir artikel, Anda akan menemukan tutorial singkat tentang cara membuat simulator Flexbox.



Tanpa kata pengantar lebih lanjut.

Flexbox (Flex, selanjutnya disebut Flex)

Terminologi

Flex bukanlah properti terpisah, tetapi seluruh modul yang menyertakan sekumpulan properti. Beberapa properti ini ditambahkan ke wadah (elemen induk, dikenal sebagai wadah fleksibel), lainnya ke elemen anak (dikenal sebagai item flex, selanjutnya disebut - elemen)).



Tata letak "reguler" didasarkan pada aliran elemen blok dan sebaris, sedangkan tata letak fleksibel didasarkan pada arah aliran-fleksibel. Lihatlah gambar ini dari spesifikasi untuk menampilkan ide-ide utama di balik tata letak fleksibel.







Elemen diposisikan di sepanjang sumbu utama (dari main-start hingga main-end) atau di sepanjang sumbu silang (dari cross-start hingga cross-end).

• — , , . ; «flex-direction» (, . )
• main-start | main-end — main-start main-end
• (main size) — (main dimension),
• — , .
• cross-start | cross-end — , cross-end cross-start
• (cross size) —

-

display

Properti ini mendefinisikan wadah fleksibel; blok atau garis tergantung pada nilai yang diberikan. Ini mencakup "konteks fleksibel" untuk semua turunan langsung dari penampung.

.container {
  display: flex; /*  inline-flex */
}

Perhatikan bahwa properti kolom CSS di penampung tidak berfungsi.

arah fleksibel

Properti ini menentukan sumbu utama, arah penempatan item dalam wadah. Flex sendiri (tanpa pembungkus memperluas fungsinya) mengimplementasikan konsep tata letak searah. Oleh karena itu, elemen ditempatkan baik dalam garis horizontal atau dalam kolom vertikal.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• baris (default): item ditata dari kiri ke kanan di ltr atau kanan ke kiri di rtl
• row-reverse: membalik urutan baris item - dari kanan ke kiri di ltr atau kiri ke kanan di rtl
• kolom: mirip dengan baris, tetapi dari atas ke bawah
• kolom-terbalik: mirip dengan baris-mundur, tetapi dari bawah ke atas

flex-wrap (bungkus, transisi, split)

Secara default, semua item ditempatkan dalam satu baris. Dengan properti ini, Anda dapat membiarkan elemen berpindah ke baris berikutnya sesuai kebutuhan.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap (default): semua item dalam satu baris
• bungkus: elemen dapat menjangkau banyak baris dari atas ke bawah
• wrap-reverse: elemen dapat menjangkau banyak baris dari bawah ke atas

aliran fleksibel (aliran)

Properti ini adalah singkatan dari flex-direction dan flex-wrap, yang mendefinisikan sumbu utama dan sumbu silang dari container. Standarnya adalah baris nowrap.

.container {
  flex-flow: column wrap;
}

justify-content (sejajarkan konten pada satu baris)

Properti ini menentukan perataan elemen di sepanjang sumbu utama. Ini memungkinkan Anda untuk mendistribusikan ruang kosong yang tersisa dari elemen yang tidak digunakan dengan ukuran tetap atau elemen fleksibel yang telah mencapai ukuran maksimumnya. Ini juga memungkinkan Anda untuk mengontrol penyelarasan item yang meluap.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• flex-start (default): item dipindahkan ke awal container di sepanjang sumbu utama
• flex-end: item didorong ke ujung container
• start: elemen dipindahkan ke awal penampung, ditentukan oleh nilai properti "mode penulisan"
• end: elemen digeser ke akhir penampung, ditentukan oleh nilai properti "mode penulisan"
• kiri: item didorong ke tepi kiri wadah; tanpa flex-direction, perilakunya sama dengan start
• kanan: item diperas ke tepi kanan wadah; tanpa flex-direction, perilakunya sama dengan start
• center:
• space-between: , , — ,
• space-around: . , ; , . , ,
• space-evenly: ,

Perhatikan bahwa dukungan untuk properti yang terdaftar berbeda di semua browser. Yang paling aman adalah mulai fleksibel, ujung fleksibel, dan tengah.



Sedangkan untuk kata kunci tambahan "aman" dan "tidak aman", menggunakan aman memungkinkan Anda menghindari menggambar elemen di luar halaman, terlepas dari pemosisiannya, yang pada akhirnya menghilangkan kemungkinan pengguliran.

meratakan-item (meratakan item)

Properti ini menentukan bagaimana elemen ditempatkan di sepanjang sumbu transversal. Ini dapat dibandingkan dengan justify-content untuk sumbu transversal (tegak lurus dengan sumbu utama).

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• stretch (default): elemen meregang untuk mengisi seluruh penampung (tergantung pada min-width / max-width)
• flex-start / start / self-start: item diimbangi ke awal sumbu silang. Perbedaan antara properti di atas tidak signifikan dan bergantung pada arah fleksibel atau mode penulisan
• flex-end / end / self-end: Item diimbangi ke ujung sumbu silang. Perbedaan antara properti di atas tidak signifikan dan bergantung pada arah fleksibel atau mode penulisan
• center: elemen dipusatkan
• baseline: elemen disejajarkan di sepanjang garis dasarnya

Kata kunci pengubah "aman" dan "tidak aman" dapat digunakan sebagai setelan tambahan untuk menghindari penyelarasan elemen yang akan membuat konten tidak dapat diakses (tidak dapat diakses, di luar halaman).

sejajarkan-konten (sejajarkan konten di beberapa baris)

Properti ini menentukan kesejajaran garis kontainer ketika ada ruang kosong di sepanjang sumbu transversal. Ini mirip dengan justify-content, yang mendistribusikan ruang di antara elemen individu di sepanjang sumbu utama.



Perhatikan bahwa properti yang dimaksud hanya berlaku untuk konten kontainer yang mencakup beberapa baris ketika properti flex-wrap disetel ke wrap atau wrap-reverse. Untuk one-liner (ketika properti "flex-wrap" memiliki nilai "no-wrap" default), menerapkan align-content tidak akan berpengaruh.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

• normal (default): garis berada pada posisi normal
• flex-start / start: garis dipindahkan ke awal container. flex-start bergantung pada flex-direction dan start bergantung pada mode penulisan
• flex-end / end: garis didorong ke ujung wadah. flex-end tergantung pada flex-direction dan end tergantung pada mode-penulisan
• center: garis tengah
• spasi-antara: garis diposisikan sedemikian rupa sehingga baris pertama berada di awal wadah, yang terakhir di akhir, dan baris yang tersisa ditempatkan secara merata
• spasi-sekitar: garis diberi spasi dengan jarak yang sama di antara mereka
• spasi-merata: garis diberi jarak dengan spasi yang sama di sekelilingnya
• peregangan: garis meregang untuk mengambil semua ruang yang tersedia

Kata kunci pengubah "aman" dan "tidak aman" dapat digunakan sebagai setelan tambahan untuk menghindari penyelarasan elemen yang akan membuat konten tidak dapat diakses (tidak dapat diakses, di luar halaman).

Properti elemen fleksibel

order (pesan)

Secara default, elemen disusun dalam wadah sesuai urutan mereka dicantumkan di markup. Properti ini memungkinkan Anda untuk mengontrol ini.

.item {
  order: 5; /*    0 */
}

flex-grow (pertumbuhan, ekspansi)

Properti ini menentukan kemampuan elemen untuk berkembang saat dibutuhkan. Dibutuhkan nilai integer yang bertindak sebagai proporsi. Proporsi menentukan berapa banyak ruang yang tersedia dalam wadah yang dapat ditempati suatu barang.



Jika semua item memiliki flex-grow 1, maka ruang yang tersedia didistribusikan secara merata di antara mereka. Jika salah satu item memiliki flex-grow 2, item itu akan memakan ruang dua kali lipat dibandingkan item lainnya (atau setidaknya coba lakukan itu).

.item {
  flex-grow: 4; /*   0 */
}

Nilai negatif tidak valid.

flex-shrink (menyusut, menyusut)

Properti ini menentukan kemampuan elemen untuk dikompresi saat diperlukan.

.item {
  flex-shrink: 3; /*   1 */
}

Nilai negatif tidak valid.

flex-basis

Properti ini menentukan ukuran default elemen sebelum mendistribusikan ruang yang tersisa. Ukuran ini dapat berupa panjang (misalnya, 20%, 5rem, dll.) Atau kata kunci. Kata kunci otomatis berarti menggunakan nilai properti "width" atau "height" (sebelumnya, ukuran utama digunakan sebagai pengganti auto). Kata kunci "konten" berarti memperhitungkan konten elemen. Kata kunci ini belum didukung dengan baik, sehingga sulit untuk membedakan antara min-content, max-content dan fit-content.

.item {
  flex-basis:  | auto; /*   auto */
}

Jika nilai properti ini adalah 0, ruang yang mengelilingi elemen tidak diperhitungkan. Jika nilainya adalah "auto", ruang yang tersedia dialokasikan sesuai dengan nilai properti "flex-grow".

melenturkan

Properti ini adalah singkatan dari flex-grow, flex-shrink, dan flex-basis. Parameter kedua dan ketiga (flex-shrink and flex-basis) bersifat opsional. Standarnya adalah 0 1 otomatis, dan otomatis dapat dihilangkan.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Sebaiknya gunakan singkatan ini daripada menentukan setiap properti sehingga nilai properti ditentukan secara otomatis dalam urutan yang benar.

align-self (perataan elemen tunggal)

Properti ini memungkinkan Anda untuk menimpa default atau align-self alignment dari masing-masing elemen.



Lihat penjelasan align-item untuk nilai yang tersedia.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Perhatikan bahwa float, clear dan vertical-align tidak berpengaruh pada elemen fleksibel.

Contoh dari

Mari kita mulai dengan contoh yang sangat sederhana - memecahkan masalah menyelaraskan elemen ke tengah.

.parent {
  display: flex;
  height: 300px; /*     */
}

.child {
  width: 100px;  /*     */
  height: 100px; /*     */
  margin: auto;  /* ! */
}

Ini bekerja berkat fakta bahwa properti "margin" yang disetel ke "auto" menggunakan semua ruang yang tersedia dari wadah fleksibel. Oleh karena itu, menyetel nilai padding vertikal ke otomatis menghasilkan pemusatan elemen yang sempurna pada kedua sumbu.



Sekarang mari kita coba menggunakan lebih banyak properti. Kami memiliki 6 elemen berukuran tetap yang dapat diubah ukurannya bergantung pada lebar layar tanpa melibatkan kueri media. Kami ingin ruang yang tersedia dari sumbu utama didistribusikan secara merata di antara elemen.

.flex-container {
  /*     - */
  display: flex;

  /*     ,
           
   *       :
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;

  /* ,  ,      */
  justify-content: space-around;
}

Selesai. Tetap sedikit bergaya:







Ayo coba yang lain. Misalkan kita memiliki menu navigasi rata kanan di header situs kita, dan kita ingin itu dipusatkan pada layar sedang dan berbaris dalam satu kolom pada layar kecil. Sangat mudah.

/*   */
.navigation {
  display: flex;
  flex-flow: row wrap;
  /*          */
  justify-content: flex-end;
}

/*   */
@media (max-width: 800px) {
  .navigation {
    /*                 */
    justify-content: space-around;
  }
}

/*   */
@media (max-width: 500px) {
  .navigation {
    /*           ()   () */
    flex-direction: column;
  }
}

Mari bereksperimen dengan fleksibilitas elemen. Bagaimana tentang membuat tata letak tiga kolom pertama seluler dengan header dan footer ukuran penuh yang tidak bergantung pada urutan elemen di markup.

.wrapper {
  display: flex;
  flex-flow: row wrap;
}

/*   flex-basis       100% */
.wrapper > * {
  flex: 1 100%;
}

/*      
 * 1. header
 * 2. article
 * 3. aside 1
 * 4. aside 2
 * 5. footer
 */

/*   */
@media all and (min-width: 600px) {
  /*        */
  .aside { flex: 1 auto; }
}

/*   */
@media all and (min-width: 800px) {
  /*      main 
   *   main   2   ,  
   */
  .main { flex: 2 0px; }
  .aside-1 { order: 1; }
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

Sumber Daya Berguna

• Spesifikasi
• MDN
• Lembar Cheat Flexbox
• Flexbox Froggy

Dukung

Grid (selanjutnya disebut Grid atau Grid)

CSS Grid Layout sejauh ini merupakan alat tata letak halaman yang paling kuat. Ini adalah sistem dua arah. Ini berarti dapat bekerja dengan baris dan kolom, tidak seperti Flex, yang hanya dapat bekerja dengan baris. Grid meliputi properti elemen induk (Grid Container, selanjutnya disebut wadah) dan properti elemen anak (Grid Elements, selanjutnya disebut elemen).

Terminologi

Grid Container (selanjutnya disebut wadah)

Sebuah elemen yang diberi properti "display" dengan nilai "grid" menjadi wadah grid. Penampung ini adalah leluhur langsung dari semua item petak. Dalam contoh berikut, div dengan kelas "container" adalah container grid.

<div class="container">
  <div class="item item-1"> </div>
  <div class="item item-2"> </div>
  <div class="item item-3"> </div>
</div>

Garis Kisi (selanjutnya disebut garis)

Garis pemisah yang membentuk struktur Grid. Ini bisa vertikal atau horizontal dan menunjukkan batas baris atau kolom. Garis kuning pada gambar di bawah ini merupakan contoh garis grid vertikal (column grid line).

Grid Track (selanjutnya disebut track atau track)

Jarak antara dua garis yang berdekatan. Anda dapat menganggap track sebagai baris atau kolom dari Grid. Berikut adalah contoh trek antara baris kedua dan ketiga.

Area grid (selanjutnya disebut area)

Total ruang di antara empat garis. Suatu area dapat menjangkau sejumlah sel grid. Berikut adalah contoh luas antara garis horizontal 1 dan 3 dan garis vertikal 1 dan 3.

Elemen Grid (selanjutnya disebut elemen)

Anak (keturunan langsung) dari wadah. Dalam contoh berikut, item dengan kelas "item" adalah item petak, tetapi item dengan kelas "sub-item" bukan.

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

Sel kisi (selanjutnya disebut sel)

Jarak antara dua garis horizontal dan vertikal yang berdekatan. Ini adalah unit dasar Grid. Berikut adalah contoh sel antara garis horizontal 1 dan 2 dan garis vertikal 2 dan 3.

Contoh

Kolom dengan lebar fleksibel yang secara otomatis mengubah ukuran berdasarkan lebar layar tanpa kueri media.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /*      min() */
  /* grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); */
  grid-gap: 1rem;
  /*    ,    */
  /* gap: 1rem */
}

Properti wadah kisi

layar

Properti ini membuat elemen menjadi wadah kisi dan menyetel konteks kisi untuk isinya.

.container {
  display: grid | inline-grid;
}

• grid - blokir Grid
• kisi-kisi - kisi sebaris

Perhatikan bahwa kemampuan untuk membuat Grid bertingkat telah dipindahkan ke spesifikasi CSS Grid Level 2 .

kisi-templat-kolom, kisi-templat-baris

Properti ini menentukan kolom dan baris nilai Kisi yang Dipisahkan Ruang. Nilai mewakili ukuran trek, dan spasi mewakili garis.

.container {
  grid-template-columns:  ... |   ...;
  grid-template-rows:  ... |   ...;
}

• <track-size> - panjang, persentase atau pecahan dari ruang kosong Grid (menggunakan unit "fr")
• <line-name> - nama arbitrer

Saat Anda meninggalkan ruang putih di antara nilai trek, garis secara otomatis diberi angka positif dan negatif:

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

Anda dapat menentukan nama baris secara eksplisit. Perhatikan tanda kurung siku:

.container {
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

Garis dapat memiliki beberapa nama. Di sini, misalnya, baris kedua memiliki dua nama:

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

Jika definisi berisi fragmen berulang, Anda dapat menggunakan pernyataan "repeat" untuk mempersingkat:

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

Yang setara dengan berikut ini:

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

Jika beberapa baris memiliki nama yang sama, Anda dapat menggunakan nama baris dan jumlah baris tersebut.

.item {
  grid-column-start: col-start 2;
}

Unit "fr" memungkinkan Anda menyetel ukuran lintasan sebagai bagian dari ruang kosong penampung. Pada contoh di bawah ini, setiap elemen adalah sepertiga lebar penampung:

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

Ruang kosong dihitung setelah pengurangan elemen ukuran tetap. Pada contoh berikut, ruang yang tersedia untuk alokasi menggunakan unit "fr" tidak termasuk 50px:

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

grid-template-area

Properti ini mendefinisikan template Grid menggunakan nama area yang ditentukan dalam properti "grid-area". Mengulangi nama area menyebabkan konten meluas dengan jumlah sel yang ditentukan. Titik berarti sel kosong. Sintaks ini memungkinkan Anda untuk memvisualisasikan struktur Grid.

.container {
  grid-template-areas:
    " | . | none | ..."
    "...";
}

• <grid-area-name> - nama area
• ... - sel kosong
• tidak ada - tidak ada area

Contoh:

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas:
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

Kode ini membuat Grid dengan lebar empat kolom dan tinggi tiga baris. Baris pertama (atas) terisi penuh oleh header. Baris tengah terdiri dari dua area "utama", satu sel kosong, dan satu area "sidebar". Baris terakhir adalah basement.







Setiap baris dalam definisi harus memiliki jumlah kolom yang sama.



Sejumlah titik dapat digunakan untuk mewakili sel kosong. Selama tidak ada spasi di antara titik-titik tersebut, itu adalah indikator dari sel kosong.



Perhatikan bahwa sintaks ini digunakan untuk merepresentasikan area, bukan garis. Menggunakan sintaks ini, garis di setiap sisi wilayah dinamai secara otomatis. Jika nama wilayahnya adalah "foo", maka baris pertama (pertama) (baris dan kolom) dari wilayah tersebut akan menjadi "foo-start", dan yang terakhir - "foo-end". Artinya, beberapa baris dapat memiliki beberapa nama, seperti pada contoh di atas, di mana baris kiri atas memiliki tiga nama: header-start, main-start, dan footer-start.

grid-template

Properti ini adalah singkatan dari grid-template-row, grid-template-kolom, dan grid-template-area.

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

• none - menyetel ulang nilai dari ketiga properti ke default
• <grid-template-rows> / <grid-template-columns> - menyetel properti "grid-template-baris" dan "grid-template-kolom" ke nilai yang sesuai, dan properti "grid-template-area" ke "tidak ada"

Anda dapat menggunakan sintaks yang lebih kompleks, tetapi pada saat yang sama lebih nyaman untuk menentukan nilai dari ketiga properti:

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

Ini sama dengan yang berikut:

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas:
    "header header header"
    "footer footer footer";
}

Karena template-kisi tidak menyetel ulang properti Kisi implisit (seperti kisi-kolom-otomatis, kisi-baris-otomatis, dan kisi-alur-otomatis), yang diperlukan dalam banyak kasus, disarankan untuk menggunakan properti "kisi" sebagai gantinya.

kolom-celah, celah-baris, kisi-kolom-celah, kisi-baris-celah

Properti ini menentukan ukuran garis. Dengan kata lain, mereka menentukan jumlah lekukan antar kolom / garis.

.container {
  /*  */
  column-gap: <line-size>;
  row-gap: <line-size>;

  /*  */
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

• <line-size> - jumlah indentasi

Contoh:

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;
  column-gap: 10px;
  row-gap: 15px;
}

Padding hanya dibuat di antara kolom / baris, tidak di sepanjang tepi Grid.



Perhatikan bahwa properti "grid-column-gap" dan "grid-row-gap" sekarang telah diubah namanya menjadi "column-gap" dan "row-gap".

gap, grid-gap

Properti ini adalah singkatan dari row-gap dan column-gap.

.container {
  /*  */
  gap: <grid-row-gap> <grid-column-gap>;

  /*  */
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

• <grid-row-gap> <grid-column-gap> - ukuran padding

Contoh:

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px;
  gap: 15px 10px;
}

Jika nilai properti "baris-celah" tidak ditetapkan, itu ditetapkan ke nilai properti "celah-kolom".



Perhatikan bahwa properti "grid-gap" sekarang telah diubah namanya menjadi "gap".

membenarkan-item

Properti ini menentukan perataan item dalam sel di sepanjang sumbu garis (horizontal) (berlawanan dengan properti "align-item", yang menentukan perataan di sepanjang sumbu blok (kolom, vertikal)). Nilai properti ini berlaku untuk semua elemen dalam penampung.

.container {
  justify-items: start | end | center | stretch;
}

• start - elemen digeser ke awal selnya (batas kiri)
• end - elemen digeser ke ujung sel (batas kanan)
• center - elemen berada di tengah
• regangkan - elemen mengisi lebar penuh sel

.container {
  justify-items: start;
}

.container {
  justify-items: end;
}

.container {
  justify-items: center;
}

.container {
  justify-items: stretch;
}

Posisi item individu di sepanjang sumbu baris sel dikontrol oleh properti "justify-self".

menyelaraskan-item

Properti ini menentukan perataan item dalam sel di sepanjang sumbu kotak (kolom, vertikal) (berlawanan dengan properti "ratakan-item", yang menentukan perataan di sepanjang sumbu baris (horizontal)). Nilai properti ini berlaku untuk semua elemen dalam penampung.

.container {
  align-items: start | end | center | stretch;
}

• start - elemen digeser ke awal selnya (batas atas)
• end - elemen digeser ke ujung sel (batas bawah)
• center - item dipusatkan
• regangkan - elemen mengisi ketinggian penuh sel

.container {
  align-items: start;
}

.container {
  align-items: end;
}

.container {
  align-items: center;
}

.container {
  align-items: stretch;
}

Posisi elemen individu di sepanjang sumbu kolom sel dikontrol oleh properti "align-self".

tempat-barang

Properti ini adalah singkatan dari align-items dan justify-items.

.container {
  place-items: <align-items> <justify-items>;
}

• <align-items> <justify-items> adalah nilai pertama untuk align-item, yang kedua untuk justify-item. Jika tidak ada nilai kedua, nilai pertama ditetapkan ke kedua properti.

Contoh:

.container {
  place-items: center start;
}

Item dipusatkan di sepanjang sumbu kolom dan di asal sepanjang sumbu garis.

justify-content (perataan kolom)

Terkadang lebar total elemen Grid (kolomnya) kurang dari lebar container. Ini bisa terjadi saat menentukan elemen ukuran tetap (menggunakan px, misalnya). Dalam hal ini, kita dapat menentukan urutan kolom Grid di container. Properti ini menentukan perataan Grid di sepanjang sumbu garis - perataan kolom (berlawanan dengan properti "align-content", yang menentukan perataan Grid di sepanjang sumbu kotak (kolom) - perataan baris).

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

• start - menggeser Grid ke awal container (batas kiri)
• end - memindahkan Grid ke ujung container (batas kanan)
• center - Kotak berada di tengah
• stretch — ,
• space-around — ,
• space-between — , — ,
• space-evenly — ,

.container {
  justify-content: start;
}

.container {
  justify-content: end;
}

.container {
  justify-content: center;
}

.container {
  justify-content: stretch;
}

.container {
  justify-content: space-around;
}

.container {
  justify-content: space-between;
}

.container {
  justify-content: space-evenly;
}

align-content ( )

Terkadang tinggi total elemen Grid (barisnya) kurang dari tinggi container. Ini bisa terjadi saat menentukan elemen ukuran tetap (menggunakan px, misalnya). Dalam hal ini, kita dapat menentukan urutan baris Grid dalam container. Properti ini mendefinisikan perataan Grid di sepanjang sumbu kotak (kolom) - perataan baris (berlawanan dengan properti "justify-content", yang menentukan perataan Grid di sepanjang sumbu sebaris - perataan kolom).

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}

• start - menggeser Grid ke awal container (batas atas)
• end - menggeser Grid ke ujung container (batas bawah)
• center - Kotak berada di tengah
• regangkan - garisnya direntangkan sehingga Grid memenuhi seluruh tinggi wadah
• space-around - jarak yang sama di antara garis, dan setengah dari ruang di sekitar tepi wadah
• spasi-antara - baris pertama digeser ke awal wadah, yang terakhir - ke akhir, ruang kosong didistribusikan secara merata di antara sisa baris
• spasi-merata - jarak yang sama di antara garis dan di tepi wadah

.container {
  align-content: start;
}

.container {
  align-content: end;
}

.container {
  align-content: center;
}

.container {
  align-content: stretch;
}

.container {
  align-content: space-around;
}

.container {
  align-content: space-between;
}

.container {
  align-content: space-evenly;
}

tempat-konten

Properti ini adalah singkatan dari align-content dan justify-content.

.container {
  place-content: <align-content> <justify-content>;
}

• <align-content> <justify-content> adalah nilai pertama untuk align-content, yang kedua untuk justify-content. Jika tidak ada nilai kedua, nilai pertama ditetapkan ke kedua properti.

Contoh:

.container {
  place-content: center start;
}

Baris di tengah dalam penampung, kolom di awal.

kisi-kolom-otomatis, kisi-baris-otomatis (ukuran trek implisit)

Properti ini menentukan ukuran trek yang dibuat secara otomatis (trek implisit). Trek implisit dibuat saat ada lebih banyak item daripada sel di Kisi, atau saat item ditempatkan di luar Kisi.

.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

• <track-size> - panjang, persentase, atau pecahan dari ruang kosong Grid (menggunakan unit "fr")

Contoh:

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px;
}

Ini menciptakan Grid 2x2.



Misalkan kita menggunakan properti "grid-column" dan "grid-row" untuk memosisikan item seperti ini:

.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

Elemen dengan kelas "item-b" dimulai dengan garis vertikal 5 dan diakhiri dengan garis vertikal 6, tetapi kami belum menentukan garis tersebut. Karena kita mereferensikan garis yang tidak ada, track dengan lebar nol implisit dibuat untuk mengisi indentasi. Kita dapat menggunakan properti "grid-auto-kolom" untuk menentukan lebar trek implisit:

.container {
  grid-auto-columns: 60px;
}

grid-aliran otomatis

Algoritme penempatan otomatis dapat digunakan untuk memposisikan item di luar Grid. Properti yang dipertimbangkan menentukan bagaimana algoritma yang diberikan harus bekerja.

.container {
  grid-auto-flow: row | column | row dense | column dense;
}

• baris (default) - algoritme mengisi baris saat ini hingga batas dan, jika perlu, ketika lebar baris saat ini tidak cukup, membuat baris baru
• kolom - algoritma mengisi kolom saat ini hingga batasnya dan, jika perlu, ketika ketinggian kolom saat ini tidak mencukupi, membuat kolom baru
• padat - pengisian Grid secara cerdas ketika ada elemen dengan ukuran berbeda

Perhatikan bahwa rapat mengubah urutan visual item, yang dapat merusak aksesibilitas.



Mari kita asumsikan kita memiliki markup berikut:

  <section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

Kami mendefinisikan Grid dengan lima kolom dan dua baris dan menyetel properti "grid-auto-flow" ke "row" (yang merupakan default):

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

Saat menempatkan item di Grid, kami hanya menempatkan dua item:

.item-a {
  grid-column: 1;
  grid-row: 1 / 3;
}
.item-e {
  grid-column: 5;
  grid-row: 1 / 3;
}

Karena nilai properti "grid-auto-flow" adalah "row", Grid kita terlihat seperti gambar di bawah. Perhatikan susunan elemen dengan kelas "item-b", "item-c" dan "item-d" (preferensi diberikan pada baris):







Jika Anda mengubah nilai properti "grid-auto-flow" menjadi "kolom", Grid akan terlihat seperti ini cara (preferensi diberikan ke kolom):

jaringan

Properti ini adalah singkatan dari grid-template-baris, grid-template-kolom, grid-template-area, grid-auto-baris, grid-auto-kolom, dan grid-auto-flow (perhatikan bahwa satu deklarasi mungkin berisi hanya properti "eksplisit" atau "implisit").

• none - semua properti menerima nilai default
• <grid-template> - mirip dengan singkatan grid-template
• <grid-template-rows> / [alur-otomatis && padat?] <grid-auto-columns>? - mendefinisikan nilai untuk grid-template-row. Jika kata kunci "aliran otomatis" berada di sebelah kanan garis miring, nilai properti "kisi-aliran otomatis" menjadi "kolom". Jika kata kunci "padat" ditentukan sebagai tambahan untuk aliran otomatis, algoritme penyarangan otomatis akan mengemas item yang sesuai. Jika nilai untuk properti "kisi-kolom-otomatis" dihilangkan, nilainya menjadi "otomatis"
• [aliran otomatis && padat?] <grid-auto-rows>? / <grid-template-columns> - Mendefinisikan nilai untuk grid-template-kolom. Jika kata kunci "aliran otomatis" berada di sebelah kiri garis miring, nilai properti "kisi-aliran otomatis" menjadi "baris". Jika kata kunci "padat" ditentukan sebagai tambahan aliran otomatis, algoritme penyarangan otomatis mengemas item yang sesuai. Jika nilai untuk properti "grid-auto-row" dihilangkan, nilainya menjadi "auto"

Dua blok kode berikut ini setara:

.container {
  grid: 100px 300px / 3fr 1fr;
}

.container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}

Dua blok kode berikut ini setara:

.container {
  grid: auto-flow / 200px 1fr;
}

.container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}

Dua blok kode berikut ini setara:

.container {
  grid: auto-flow dense 100px / 1fr 2fr;
}

.container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}

Dan dua blok kode berikut ini juga setara:

.container {
  grid: 100px 300px / auto-flow 200px;
}

.container {
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}

Dalam kasus ini, kita dapat menggunakan sintaks yang lebih kompleks, tetapi pada saat yang sama lebih nyaman untuk mendefinisikan properti "grid-template-area", "grid-template-lines" dan "grid-template-kolom" secara bersamaan dan menyetel properti lain ke nilai default ... Yang perlu Anda lakukan untuk ini adalah menentukan nama garis dan ukuran trek dengan area yang sesuai pada satu baris. Ini lebih mudah untuk didemonstrasikan dengan contoh:

.container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

Ini sama dengan yang berikut:

.container {
  grid-template-areas:
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
}

Properti item kisi

Perhatikan bahwa properti float, display: inline-block, display: table-cell, vertical-align, dan column- * yang diterapkan ke elemen grid tidak berpengaruh.

kisi-kolom-mulai, kisi-kolom-akhir, kisi-baris-mulai, kisi-baris-akhir

Properti ini menentukan posisi elemen di Grid dengan mengaitkan ke baris tertentu. grid-column-start / grid-row-start adalah garis awal item, dan grid-column-end / grid-row-end adalah garis akhir.

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

• <line> - bisa berupa angka (pas ke nomor baris) atau nama (pas ke nama baris)
• span <number> - elemen akan diregangkan untuk jumlah trek yang ditentukan
• span <name> - elemen akan meregang hingga mencapai garis dengan nama yang ditentukan
• otomatis - tata letak otomatis, luaskan otomatis, atau bentangan satu kolom default

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2;
  grid-row-end: span 2;
}

Jika tidak ada nilai properti kisi-kolom-akhir / kisi-baris-akhir yang ditentukan, item akan menempati 1 trek secara default.



Elemen bisa saling tumpang tindih. Anda dapat menggunakan properti z-index untuk mengontrol susunan elemen.

kisi-kolom, baris-kisi

Properti ini adalah singkatan dari grid-column-start + grid-column-end dan grid-row-start + grid-row-end.

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

• <start-line> / <end-line> - nilainya sama dengan properti asli, termasuk span

Contoh:

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

Jika tidak ada garis akhir yang ditentukan, elemen akan default ke 1 track.

grid-area

Properti ini mendefinisikan nama elemen, yang digunakan sebagai nilai dalam properti grid-template-area. grid-area juga dapat digunakan sebagai singkatan dari grid-row-start + grid-column-start + grid-row-end + grid-column-end.

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

• <name> - nama sembarang elemen
• <row-start> / <column-start> / <row-end> / <column-end> - bisa berupa angka atau nama baris

Memberi nama elemen:

.item-d {
  grid-area: header;
}

Singkatan dari grid-row-start + grid-column-start + grid-row-end + grid-column-end:

.item-d {
  grid-area: 1 / col4-start / last-line / 6;
}

membenarkan-diri

Properti ini menentukan perataan elemen dalam sel di sepanjang sumbu baris (sebagai lawan dari properti penyelarasan diri, yang menentukan perataan di sepanjang sumbu kotak (kolom)). Properti ini berlaku untuk elemen dalam satu sel.

.item {
  justify-self: start | end | center | stretch;
}

• start - elemen digeser ke awal sel (batas kiri)
• akhir - elemen digeser ke ujung sel (batas kanan)
• center - elemen berada di tengah
• regangkan - elemen mengisi seluruh lebar sel

.item-a {
  justify-self: start;
}

.item-a {
  justify-self: end;
}

.item-a {
  justify-self: center;
}

.item-a {
  justify-self: stretch;
}

Properti justify-items digunakan untuk mengontrol perataan semua item Grid di sepanjang sumbu garis.

menyelaraskan diri

Properti ini menentukan perataan item dalam sel di sepanjang sumbu kotak (kolom) (berlawanan dengan properti justify-self, yang menentukan perataan di sepanjang sumbu baris). Properti ini berlaku untuk elemen dalam satu sel.

.item {
  align-self: start | end | center | stretch;
}

• start - elemen digeser ke awal sel (batas atas)
• end - elemen digeser ke ujung sel (batas bawah)
• center - elemen berada di tengah
• regangkan - elemen mengisi tinggi seluruh sel

.item-a {
  align-self: start;
}

.item-a {
  align-self: end;
}

.item-a {
  align-self: center;
}

.item-a {
  align-self: stretch;
}

Properti align-item digunakan untuk mengontrol perataan semua item Grid di sepanjang sumbu blok (kolom).

menempatkan diri

Properti ini adalah singkatan dari menyelaraskan diri dan membenarkan diri.

• otomatis - nilai default
• <align-self> / <justify-self> adalah nilai pertama untuk align-self, yang kedua untuk justify-self. Jika nilai kedua dihilangkan, nilai pertama diterapkan ke kedua properti

.item-a {
  place-self: center;
}

.item-a {
  place-self: center stretch;
}

• , px, rem, % .., , min-content, max-content, auto , , — (fr). grid-template-columns: 200px 1fr 2fr min-content
• , . , , 1fr, 200px: grid-template-columns: 1fr minmax(200px, 1fr)
• repeat() : grid-template-columns: repeat(10, 1fr) ( , 1fr)
• Kombinasi fitur-fitur ini memungkinkan Anda mencapai fleksibilitas tata letak yang luar biasa, misalnya: grid-template-kolom: ulangi (pengisian otomatis, minmax (200px, 1fr)) (dari contoh di awal bagian Kisi)

Sumber Daya Berguna

• Spesifikasi
• MDN
• Lembar Kode Grid
• Taman grid

Dukung

Tutorial

Dalam tutorial ini, kita akan membuat pelatih sederhana untuk properti Flexbox dasar.

Markup

<main>
  <div id="controls">
    <div id="buttons">
      <button data-btn="addBtn">Add Item</button>
      <button data-btn="removeBtn">Remove Item</button>
    </div>
    <fieldset id="flexContainerProps">
      <legend>Flex Container Props</legend>
      <label for="flexDirection">flex-direction</label>
      <select id="flexDirection">
        <option value="row" selected>row</option>
        <option value="row-reverse">row-reverse</option>
        <option value="column">column</option>
        <option value="column-reverse">column-reverse</option>
      </select>

      <label for="flexWrap">flex-wrap</label>
      <select id="flexWrap">
        <option value="nowrap">nowrap</option>
        <option value="wrap" selected>wrap</option>
        <option value="wrap-reverse">wrap-reverse</option>
      </select>

      <label for="justifyContent">justify-content</label>
      <select id="justifyContent">
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center" selected>center</option>
        <option value="space-between">space-between</option>
        <option value="space-around">space-around</option>
        <option value="space-evenly">space-evenly</option>
      </select>

      <label for="alignItems">align-items</label>
      <select id="alignItems">
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center" selected>center</option>
        <option value="stretch">stretch</option>
        <option value="baseline">baseline</option>
      </select>

      <label for="alignContent">align-content</label>
      <select id="alignContent">
        <option value="flex-start" selected>flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center">center</option>
        <option value="stretch">stretch</option>
        <option value="space-between">space-between</option>
        <option value="space-around">space-around</option>
        <option value="space-evenly">space-evenly</option>
      </select>
    </fieldset>

    <fieldset id="flexItemProps">
      <legend>Flex Item Props</legend>
      <label for="order">order</label>
      <input
        id="order"
        type="number"
        min="-5"
        max="5"
        step="1"
        value="0"
      />

      <label for="flexGrow">flex-grow</label>
      <input
        id="flexGrow"
        type="number"
        min="0"
        max="5"
        step="1"
        value="0"
      />

      <label for="flexShrink">flex-shrink</label>
      <input
        id="flexShrink"
        type="number"
        min="1"
        max="6"
        step="1"
        value="1"
      />

      <label for="alignSelf">align-self</label>
      <select id="alignSelf">
        <option value="auto" selected>auto</option>
        <option value="flex-start">flex-start</option>
        <option value="flex-end">flex-end</option>
        <option value="center">center</option>
        <option value="stretch">stretch</option>
        <option value="baseline">baseline</option>
      </select>
    </fieldset>
  </div>

  <div id="flexContainer">
    <div class="flex-item selected">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
  </div>
</main>

Di sini kita memiliki flexContainer dengan enam item-flex dan sebuah kontrol untuk mengontrol sakelar antara properti flexContainerProps dan flexItemProps yang dipilih. Juga di penampung kedua, Anda memiliki dua tombol: satu untuk menambahkan elemen ke penampung flex (addBtn), yang lain untuk menghapus elemen flex terakhir (removeBtn).

Gaya

main {
  display: flex;
  justify-content: center;
  align-items: center;
}

#controls {
  margin-right: 0.4rem;
}

#buttons {
  margin: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

button {
  margin: 0.2rem;
}

label {
  display: block;
  margin: 0.4rem;
}

select {
  width: 100%;
}

#flexContainer {
  width: 600px;
  height: 600px;
  border: 1px dashed #222;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.flex-item {
  min-width: 178px;
  min-height: 178px;
  background: radial-gradient(circle, yellow, orange);
  border: 1px solid #222;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  color: #222;
  font-size: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  cursor: pointer;
}

.flex-item:nth-child(2n) {
  min-width: 158px;
  min-height: 158px;
}

.flex-item:nth-child(3n) {
  min-width: 198px;
  min-height: 198px;
}

.flex-item.selected {
  background: radial-gradient(circle, lightgreen, darkgreen);
}

Elemen lentur harus memiliki ukuran yang berbeda dan fleksibel pada saat yang bersamaan. Kami mencapai ini dengan min-width / min-height dan nth-child. Item yang dipilih adalah kelas "dipilih" dengan warna latar berbeda.

Naskah

//    
const controls = document.querySelector('#controls')
const buttons = document.querySelector('#buttons')
const flexContainer = document.querySelector('#flexContainer')

//   
buttons.addEventListener('click', (e) => {
  //     
  if (e.target.tagName !== 'BUTTON') return

  //   
  const { btn } = e.target.dataset

  switch (btn) {
    //        -
    case 'addBtn':
      //     6 
      //      -
      //    
      const num = document.querySelectorAll('.flex-item').length + 1
      // ,      7 
      //   
      if (num < 7) {
        //    "div"
        const newItem = document.createElement('div')
        //    
        newItem.className = 'flex-item'
        //  
        newItem.textContent = num
        //    -
        flexContainer.append(newItem)
      }
      break
    //      -
    case 'removeBtn':
      //    
      const index = document.querySelectorAll('.flex-item').length - 1
      // ,      0
      //      -
      if (index > 0) {
        //  ,  
        const itemToRemove = document.querySelectorAll('.flex-item')[index]
        //   
        itemToRemove.remove()
      }
      break
  }
})

//     
controls.addEventListener('change', (e) => {
  //    
  const prop = e.target.id
  //    
  const value = e.target.value

  // ,   
  //  -    -
  //      
  if (e.target.parentElement.id === 'flexContainerProps') {
    flexContainer.style[prop] = value
  } else {
    const selectedItem = document.querySelector('.selected')
    selectedItem.style[prop] = value
  }
})

//   -
flexContainer.addEventListener('click', (e) => {
  //        -
  if (
    e.target.className !== 'flex-item' ||
    e.target.classList.contains('selected')
  )
    return

  //     "selected"    
  if (document.querySelector('.selected') !== null)
    document.querySelector('.selected').classList.remove('selected')

  //      
  e.target.classList.add('selected')

  //   -      "-"
  //       
  //      -
  //    
  //   ,     

  //         
  //         -
  const getStyle = (property, element = e.target) =>
    getComputedStyle(element).getPropertyValue(property)

  //  ,      DOM-,   "id", 
  //  ,     
  order.value = getStyle('order')
  flexGrow.value = getStyle('flex-grow')
  flexShrink.value = getStyle('flex-shrink')
  alignSelf.value = getStyle('align-self')
})

Seperti yang Anda lihat, tidak ada yang rumit. Tentunya fungsi dari simulator yang dihasilkan sangat terbatas. Namun, saya rasa ini cukup untuk memahami cara kerja properti dasar Flexbox.



Saya sarankan mencoba membuat simulator serupa berdasarkan properti dasar Grid - ini akan menjadi praktik yang sangat baik dan memungkinkan Anda memahami semuanya dengan benar.







Anda mungkin juga menemukan salah satu proyek terbaru saya yang menarik, Template Pemula HTML Modern .



Terima kasih atas perhatiannya dan semoga harimu menyenangkan.