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. Mod düğmesiyle Flex veya Grid'i seçin, ardından kapsayıcı özelliklerini basit açılır menüler ve sayı alanlarıyla ayarlayın: Flex modunda flex-direction, flex-wrap, justify-content ve align-items'ı kontrol edersiniz; Grid modunda kaç sütun ve satır olacağını (repeat(n, 1fr) olarak işlenir) ayrıca justify-items ve align-items'ı belirlersiniz. Bir gap değeri ve bir öğe sayısı her ikisi için de geçerlidir. Numaralı karolardan oluşan canlı bir önizleme, hizalamanızın ve aralığınızın tam olarak nasıl davrandığını gösterir ve kopyalamanız için eksiksiz .container CSS kuralı oluşturulur. Bir flex veya grid ayarının projenize yapıştırmadan önce gerçekte nasıl göründüğünü görmek istediğinizde başvurun.

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. Flex modunda flex-direction, flex-wrap, justify-content ve align-items'ı açılır menülerden ayarlayın.
3. Grid modunda sütun ve satır sayısını, ayrıca justify-items ve align-items'ı ayarlayın.
4. gap'i (px cinsinden aralık) ve önizlemede gösterilen öğe sayısını değiştirmek için Ayarlar'ı açın.
5. Her özelliği değiştirdikçe karo önizlemesinin yeniden dizilmesini izleyin.
6. Oluşturulan .container CSS kuralını kopyalayın ve stil sayfanıza yapıştırı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 · columns 3 · rows 2 · justify-items start · align-items stretch · gap 16

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

Flex · direction column · justify-content space-between · align-items stretch · gap 8

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
}

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, öğeleri grid-template-columns ve grid-template-rows (repeat(n, 1fr) olarak yazılır) ile justify-items ve align-items kullanarak iki boyutlu bir kafeste düzenler. Aynı hizalamayı her modelin nasıl ele aldığını karşılaştırmak için düğmeyle mod değiştirin.

gap değeri ne işe yarar?

gap, CSS gap özelliği aracılığıyla hem Flex hem de Grid düzenlerinde her öğe arasındaki boşluğu piksel cinsinden ayarlar. Karoları birbirinden ayırmak için artırın veya bitişik bir düzen için 0'a ayarlayın; önizleme ve oluşturulan CSS anında güncellenir.

Grid'de justify-content ve align-items neden farklı yazılıyor?

Grid, justify-items ve align-items için start, end, center ve stretch anahtar sözcüklerini kullanırken Flex flex-start ve flex-end kullanır. Araç, hangi moddaysanız ona uygun doğru anahtar sözcükleri üretir, böylece kopyalanan CSS her zaman geçerlidir.

Gösterilen öğe sayısını değiştirebilir miyim?

Evet. Ayarlar'ı açın ve numaralı önizleme karolarını eklemek veya kaldırmak için öğe sayısını değiştirin (en fazla 24). Bu yalnızca ekrandaki gösterimi etkiler; oluşturulan CSS, öğelerin kendisini değil kapsayıcıyı tanımlar.

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 çalışır ve sayfa bir kez yüklendikten sonra çevrimdışıyken bile kullanılabilir.