Układ płynny umożliwia wyrównywanie elementów, by automatycznie dopasowywały się do różnych rozmiarów i orientacji stron. Układy płynne są szczególnie przydatne w dokumentach elastycznych, ale mogą też działać z elementami o stałym rozmiarze.
W aplikacji Google Web Designer możesz używać różnych technik, aby utworzyć układ płynny:
Flexbox (Fluid Layout) - Google Web Designer
Wartości określone procentowo
Możesz ustawić rozmiary i pozycje w procentach, a nie w pikselach, aby elementy pozostały proporcjonalnie i wyrównane względem siebie.
Aby używać procentów zamiast pikseli, kliknij px w panelu Właściwości, a potem wybierz % z menu.
Aby zamienić wszystkie wartości pozycji i rozmiarów na wartości procentowe, kliknij przycisk W procentach .
W dokumencie możesz podawać wartości zarówno w procentach, jak i pikselach.
Utwierdzenie pozycji
Zakotwiczenie umożliwia trwałe wyrównywanie elementów w kontenerze, które nie zmienia się nawet po zmianie rozmiaru, dopełnienia lub szerokości obramowania elementu. Każda ustawiona pozycja lub właściwość przesunięcia spowoduje przesunięcie elementu od punktu zakotwiczenia.
Wybierasz tryb zakotwiczenia w poziomie i w pionie. Domyślne ustawienie to „lewy górny róg”.
Tryby zakotwiczenia w poziomie
| Tryb | Efekt |
|---|---|
| lewo | Lewa krawędź elementu jest wyrównana do lewej krawędzi kontenera. |
| do środka | Oś pozioma elementu jest wyrównana do osi poziomej kontenera. |
| prawo | Prawa krawędź elementu jest wyrównana do prawej krawędzi kontenera. |
Tryby zakotwiczenia w pionie
| Tryb | Efekt |
|---|---|
| góra | Górna krawędź elementu jest wyrównana do górnej krawędzi kontenera. |
| środek | Oś pionowa elementu jest wyrównana do osi pionowej kontenera. |
| dół | Dolna krawędź elementu jest wyrównana do dolnej krawędzi kontenera. |
Tryb kotwicy możesz ustawić w panelu Właściwości lub na pasku opcji narzędzi, gdy narzędzie do zaznaczania jest aktywne.
Flexbox
Flexbox (moduł układu elastycznego bloku CSS) pozwala elastycznie rozmieszczać elementy w kontenerze w wierszach lub kolumnach. Każdy element może się powiększać lub zmniejszać, aby zoptymalizować przestrzeń kontenera przy zachowaniu określonej kolejności i odstępów między elementami.
Na karcie Flexbox w panelu Elastyczny możesz używać modułów Flexbox i konfigurować ich właściwości. Dowiedz się więcej o funkcji flexbox.