Skip to content

thealico/FlexGrid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

66 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Bu grid varsayılan olarak 12 sütun üzerine flexbox tekniği ile inşa edilmiştir. Css üreticisi olarak Sass, görev yöneticisi olarak Gulp tercih edilmiştir. Grid’in sütün sayısı (column), sütün aralıkları (gutter), ekran aralıkları (media), media kural yönü tercihi (min / max) , özellik opsiyonları ve seçici kurallar set.scss üzerinden özelleştirebilirsiniz.

Row

Satırın refrans aldığı değerler aşağıdaki gibidir, örnekler için linklere bakınız.

  • center - Sütunları yatayada ortalar
  • start - Sütünları sola yaslı sıralar
  • between - Sütünları sol ve sağa doğru sonlandırarak sıralar
  • around - Sütunları merkezden ortalayarak sağa ve sola doğru sıralar
  • end - Sütunları sağa doğru yaslıyarak sıralar
  • middle - Sütünları dikeyde ortalar
  • bottom - Sütunları alta yaslar
  • top
  • stretch
  • baseline
  • direct-x - Sütunları yatay sıralar
  • direct-xr - Yatay sırayı ters çevirir
  • direct-y - Sütunları dikey sıralar
  • direct-yr - Dikey sırayı ters çevirir
  • ns - Gutter boşluklar kaldırır
  • c-nb - (col no bottom) Alt gutter boşluğu iptal eder
  • c-ob - (col no bottom) Alt gutter boşluğu aktif yapar
  • c-nf - Child No Flex - Row özelliği verilmiş sütunun flex özelliğini kaldrır
  • c-eh - ( col equal height ) Sütunları yüksekliği eşler
  • c-eh-1 - ( col equal height ) Sütunları yüksekliği flex methodu ile eşler

Col

Bunlarda sütunun refrans aldığı değerlerdir. Bir col aynı zamanda row etiketi özelliği alabiliyor col ve row'un aynı etiketlerinin çakışmaması için this col kısaltması olarak tc- eki kullanıldı.

  • tc-top Üste yaslar
  • tc-middle Dikeyde ortalar
  • tc-bottom Alta yaslar
  • [tc-ns] - Gutter boşluğunu (padding) alır
  • [tc-nb] - Alt gutter boşluğunu (padding) alır
  • [tc-ob] - Alt gutter boşluğunu (padding) aktif eder
  • tc-first
  • tc-last
  • order- Sütunun sırasını değişir
  • left- left offset öteleme
  • right- Right offset