CSS Flexbox & Grid Oyun Alanı

CSS Flexbox & Grid Oyun Alanı nedir?

CSS Flexbox & Grid Oyun Alanı, CSS'in iki ana düzen modelini öğrenmek ve prototiplemek için ücretsiz bir görsel sanal alandır; ön uç geliştiriciler, öğrenciler ve tasarımcılar için yapılmıştır. Flex veya Grid'i seçin, kapsayıcı özelliklerini ayarlayın ve Ayarlar'ı açarak her çocuğa stil verin: Flex modunda order, flex-grow, flex-shrink, flex-basis ve align-self; Grid modunda sütun/satır aralığı ve align-self. Grid modu ayrıca özel parça boyutlandırma sunar — 200px 1fr veya repeat(auto-fit, minmax(120px, 1fr)) gibi herhangi bir grid-template-columns/rows değeri yazın — ve her hücreyi adlandırdığınız görsel bir grid-template-areas düzenleyicisi (adlandırılmış ızgara çizgileri de oluşturur) içerir. Numaralı karolardan oluşan canlı önizleme her değişikliği yansıtır ve yalnızca .container kuralını ya da kapsayıcıyı öğe başına CSS ile birlikte dışa aktarabilirsiniz.

CSS Flexbox & Grid Oyun Alanı nasıl kullanılır

1. Hangi düzen modelini oluşturacağınıza karar vermek için mod düğmesiyle Flex veya Grid'i seçin.
2. Kapsayıcı özelliklerini ayarlayın — flex-direction/wrap ve justify/align, ya da justify-items/align-items ile sütun ve satır sayısı.
3. gap ve öğe sayısını değiştirmek ve her çocuğa stil vermek (order, flex-grow/shrink/basis, align-self veya sütun/satır aralığı) için Ayarlar'ı açın.
4. Grid'de parça boyutlandırmayı Özel'e getirerek kendi grid-template-columns/rows değerlerinizi yazın — px, fr, minmax() veya repeat(auto-fit/auto-fill, …).
5. grid-template-areas düzenleyicisini açın ve öğeleri alana göre yerleştirmek için her hücreyi adlandırın.
6. Yalnızca kapsayıcı CSS'ini mi yoksa kapsayıcı artı öğe başına CSS'i mi dışa aktaracağınızı seçin, sonra sonucu kopyalayın.

Örnekler

Flex · direction row · justify-content center · align-items center · gap 12

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid · custom columns: repeat(auto-fit, minmax(120px, 1fr)) · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Grid · areas: header row, sidebar + main, footer row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · export container + items · item 2 flex-grow 1

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

.container > :nth-child(2) {
  flex-grow: 1;
}

Sıkça sorulan sorular

Burada Flexbox ile Grid arasındaki fark nedir?

Flex modu öğeleri tek bir eksen boyunca dizer ve flex-direction, flex-wrap, justify-content ve align-items'ı sunar. Grid modu ise onları grid-template-columns ve grid-template-rows ile justify-items ve align-items kullanarak iki boyutta düzenler. Aynı hizalamayı her modelin nasıl ele aldığını karşılaştırmak için düğmeyle mod değiştirin.

Tek tek öğelere nasıl stil veririm?

Ayarlar'ı açın ve öğe başına denetimlerle her çocuğa order, flex-grow, flex-shrink, flex-basis ve align-self (Flex) ya da sütun/satır aralığı ve align-self (Grid) ayarlayın. Dışa Aktar'ı 'Kapsayıcı + öğeler' yapın; araç, özelleştirdiğiniz her öğe için bir .container > :nth-child(n) kuralı ekler.

auto-fit veya minmax() gibi özel parça boyutları kullanabilir miyim?

Evet. Grid modunda parça boyutlandırmayı Özel'e getirin ve geçerli bir grid-template-columns/rows değeri yazın — piksel, fr birimleri, minmax() veya duyarlı sütunlar için repeat(auto-fit/auto-fill, minmax(120px, 1fr)). Önizleme ve oluşturulan CSS siz yazdıkça güncellenir.

grid-template-areas düzenleyicisi ne yapar?

Grid modunda açın ve ızgaranın her hücresini adlandırın; araç bir grid-template-areas bildirimi oluşturur ve boş hücreler noktaya dönüşür. Alanları adlandırmak adlandırılmış ızgara çizgileri de oluşturur ve o öğenin grid-area alanına adını yazarak bir çocuğu bir alana yerleştirebilirsiniz.

Verilerim herhangi bir yere yükleniyor mu?

Hayır. Oyun alanı tamamen tarayıcınızda JavaScript ile çalışır, bu nedenle ayarlarınız ve oluşturulan CSS asla bir sunucuya gönderilmez. Gizli şekilde ve sayfa yüklendikten sonra çevrimdışıyken bile çalışır.