Flow Builder, duyarlı layoutlar oluşturur. Öğeleri tam koordinatlara sürüklemezsiniz; bunun yerine öğeleri, çocuklarını otomatik olarak düzenleyen container’ların içine yerleştirirsiniz. Konteyner, öğelerin yönünü (dikey veya yatay), hizalamasını ve aralıklarını belirler. Tek tek öğeler ise kendi boyutlarını ve kenar boşluklarını ayarlayabilir ya da — gerektiğinde — mutlak veya sabit konumlandırmayla akışın dışına çıkabilir.

Düzen

Düzen, ekrandaki öğeleri yerleştirmenin temel aracıdır. Her kapsayıcı, içindeki öğeleri belirli kurallara göre otomatik olarak dağıtır: yön, hizalama ve boşluk. Oluşturucu içinde kullanılabilen düzen öğeleri şunlardır:

• Dikey Konteyner: Çocuk öğeleri yukarıdan aşağıya sıralar
• Yatay Konteyner: Çocuk öğeleri soldan sağa sıralar
• Ayırıcı: Öğeler arasında görsel bir ayraç
• Carousel: Yatay kaydırılabilir slayt seti
• Bottom Sheet: Kullanıcı bir düğmeye dokunduğunda ek içeriği ortaya çıkaran kayan bir bindirme panel Konteynerler, bir ekranın temel yapı taşlarıdır. Karmaşık düzenler oluşturmak için iç içe yerleştirebilirsiniz. Her konteynerin sağ panelinde, alt öğelerin nasıl dağıtılacağını kontrol eden bir Layout bölümü bulunur.

Öğeleri yeni bir konteynerde gruplamak için Wrap katman eylemini kullanın. Bir konteyneri kaldırıp alt öğelerini üst seviyeye taşımak için ise Unwrap’i kullanın.

Yön

• Free: Otomatik düzen yok. Alt öğeler bağımsız olarak konumlandırılır (alt öğelerin mutlak konumlandırma kullandığı durumlarda kullanışlıdır)
• Vertical: Alt öğeler yukarıdan aşağıya, bir sütundaki satırlar gibi sıralanır
• Horizontal: Alt öğeler soldan sağa, bir satırdaki öğeler gibi dizilir

Öğe sırası

Alt öğeler, Layers panelinde göründükleri sırayla render edilir. Dikey bir container’da, listenin en üstündeki öğe ekranın en üstünde görünür. Yatay bir container’da ise en üstteki öğe solda yer alır. Öğeleri yeniden sıralamak için Layers panelinde sürükleyebilir ya da Move Up ve Move Down katman eylemlerini kullanabilirsiniz.

Hizalama

Hizalama ızgarası, alt öğelerin kapsayıcının çapraz ekseninde nereye yerleşeceğini belirler. Dikey bir kapsayıcıda hizalama, alt öğelerin yatay konumunu (sol, orta veya sağ) kontrol eder. Yatay bir kapsayıcıda ise dikey konumlarını (üst, orta veya alt) belirler.

Dağılım

Dağılım, ana eksen boyunca çocuklar arasındaki alanın nasıl bölüneceğini belirler:

• Gap (varsayılan): Bitişik çocuklar arasında sabit piksel değeri
• Space Between: Çocuklar kenarlara yayılır; aralarında eşit boşluklar oluşur
• Space Around: Her çocuğun etrafında eşit boşluk bulunur, kenarlarda yarı boyutunda boşluklar yer alır
• Space Evenly: Tüm çocukların önünde, arasında ve sonrasında eşit boşluk bulunur

İçeriği kırp

Konteynerin sınırlarını aşan içeriği görsel olarak kırpar. Bir rozet gibi kartın kenarını kasıtlı olarak taşan öğelere izin vermek istiyorsanız bu seçeneği devre dışı bırakın.

Konum

Varsayılan olarak, her öğenin konumu kapsayıcısının düzeni tarafından otomatik olarak belirlenir. Position geçişi, öğeyi normal akışın dışına çıkararak konumunu elle belirlemenizi sağlar.

Göreli (varsayılan)

Öğe, normal düzen akışında kalır. Konumu, üst kapsayıcının düzen kuralları tarafından otomatik olarak belirlenir — serbestçe sürükleyemezsiniz. Göreli bir öğenin çevresindeki boşluğu ayarlamak için Margin kullanın.

Metin blokları, görseller, kartlar, düğmeler ve liste öğeleri gibi içeriklerin büyük çoğunluğu için göreli konumlandırmayı kullanın.

Mutlak

Element, normal akışın dışına çıkar ve diğer içeriklerin üzerine yerleşir. Artık komşu elementlerin düzenini etkilemez.

Absolute seçtiğinizde ek kontroller görünür:

• Offset alanları (T, L, R, B): Elemanın üst kapsayıcısının her kenarına olan uzaklığı piksel cinsinden belirler
• Anchor grid: 3×3 ızgara üzerinde bir noktaya tıklayarak elemanın üst kapsayıcının hangi köşesine, kenarına veya merkezine bağlanacağını seçin
• Yatay anchor (Left / Center / Right) ve Dikey anchor (Top / Center / Bottom): Izgarayla aynı anchor noktasını kontrol eden açılır menüler
• Z-index: Elemanın kardeş elemanlara göre yığılma sırasını belirleyen sayısal alan. Daha yüksek değere sahip elemanlar üstte görünür Görsel üzerine yerleştirilen dekoratif katmanlar, rozetler, kapat düğmeleri ve ikonlar için mutlak konumlandırma kullanın.

Sabit

Öğe, ana kapsayıcısını tamamen yok sayarak cihaz görüntü alanına sabitlenir. Kullanıcı kaydırırken görünür kalır; sayfa içeriği onun altında hareket eder.

Sabit konumlandırma, Mutlak ile aynı kontrolleri kullanır (uzaklıklar, çapa ızgarası, Z-index). Tüm uzaklıklar üst öğeye değil, ekran kenarlarına göre hesaplanır.

Sabit konumlandırmayı, sayfanın alt kısmındaki yapışkan düğmeler, kayan gezinme çubukları ve kalıcı başlıklar için kullanın.

Boyutlandırma

Her elementin Width ve Height kontrolleri vardır. Boyutlandırma modunu seçmek için açılır menüye tıklayın:

• Fill: Öğe, üst öğesindeki tüm kullanılabilir alanı kaplayacak şekilde genişler. Gösterilen piksel değeri hesaplanan sonuçtur.
• Hug: Öğe, içeriğine sığacak şekilde küçülür. Gösterilen piksel değeri hesaplanan sonuçtur.
• Fixed: Öğe, üst öğesinden veya içerik boyutundan bağımsız olarak belirttiğiniz tam piksel değerini kullanır. Mutlak veya sabit konumlandırmalı öğeler için kullanılabilen tek moddur.

Aralık

Her kenar için aralık değerlerini bağımsız olarak ayarlayın.

• Margin: Öğe ile komşuları arasındaki boşluk. Üst kapsayıcının sınırlarını aşmaz.
• Padding: Öğenin sınırı ile içeriği arasındaki boşluk.

Metin öğelerinde yalnızca margin bulunur. Ekranlarda yalnızca padding bulunur. Kapsayıcılarda ve alt içeriğe sahip diğer öğelerde her ikisi de kullanılabilir.

Yığın sırası

Göreceli öğeler hiçbir zaman birbiriyle çakışmaz — her container, alt öğelerini sırayla yerleştirir. Çakışma yalnızca bir öğe Absolute veya Fixed konumlandırmayla normal akışın dışına çıktığında gerçekleşir.

Öğeler çakıştığında, Layers panelinde sonraki kardeş öğeler öncekilerinin üzerinde görüntülenir — sonraki kardeş göreceli, önceki ise mutlak konumlandırmalı olsa bile. Absolute ve Fixed öğeler, daha hassas kontrol için bir Z-index alanına sahiptir: daha yüksek değerler öncelik kazanır. Relative öğelerin Z-index değeri yoktur — katman sırası tek başına yığma düzenini belirler.

Öğe sırasını değiştirmek için Move up ve Move down katman eylemlerini kullanın.