Oprogramowanie które sprawia że tworzenie stron internetowych staje się przyjemością
Pierwsze kroki z FlexBox
Flexbox to nowy typ układu CSS, który wprowadza zaawansowane metody na układanie, wyrównywanie i prezentację obiektów. Flexbox składa się z elastycznych kontenerów i elementów elastycznych.
Elementy elastyczne (obiekty wewnątrz kontenera) można układać poziomo lub pionowo, wyrównać i rozmieszczać na różne sposoby. Możliwe jest również rozciąganie lub kurczenie obiektów w celu wypełnienia dostępnej pustej przestrzeni. Poza ustawieniami w kontenerze flex każdy obiekt ma również własne ustawienia flexboxa, które można ustawić za pomocą Menu->Aranżuj->Flexbox (Menu-> Arrange-> Flexbox).

Aby rozpocząć pracę z pakietem Flexbox, musisz dodać do strony pole Flex Container. Robi się to tak samo jak w przypadku warstwy lub "układu na siatce", wystarczy przeciągnąć i upuścić obiekt w obszarze roboczym. Zauważ, że samo opakowanie Flex jest elementem pływającym, więc zostanie on wstawiony do wolnego pierwszego wiersza na stronie.
Kierunek Flex (flex direction)
Ustawienia w flex-direction określa kierunek rozmieszczania elastycznych elementów wewnątrz kontenera
Następnie można umieszczać obiekty wewnątrz kontenera na stronie. Zauważ, że obiekty zostaną automatycznie wyrównane w oparciu o bieżące ustawienia kontenera Flex Container.
Właściwości dla kontenera Flex

Okno Właściwości  Flex Container umożliwiaj ustawienie sposobu rozmieszczania elementów wewnątrz kontenera.
Properties for Flex Items (Właściwości elementów Flex)
Flex wrap
Właściwość flex-wrap określa, czy elementy flex powinny być zawijane, czy nie, jeśli nie ma dla nich wystarczająco dużo miejsca w jednej linii .

nowrap; elementy (flexible) nie będą zawijane.
wrap; T elementy będą zawijane w razie potrzeby
Justify content (Wyjustuj treść)
Właściwość justify-content ustawia w poziomie elementy w kontenerze, gdy elementy nie wykorzystują całej dostępnej przestrzeni na osi głównej.
Align content (Wyrównaj treść)
Align items (Wyrównaj elementy)
Size (Rozmiar)-> tryb wymiarowania
undefined; jeśli rozmiar jest niezdefiniowany, wysokość zostanie określona przez elementy elastyczne (zawartość).
fixed; Gdy rozmiar zostanie ustalony, zostanie użyta wysokość czasu projektowania. Może to być przydatne, jeśli chcesz ustawiać pionowo pionowo obiekty.
Flex grow (Flex rozrost)
Flex shrink (Flex kurczenie)
Flex basis (Podstawa Flex)
Align self (Wyrównaj Się)
row; rząd - wartość domyślna poczatkowa (od lewej do prawej, od góry do dołu).
row-reverse; rząd-odwrócenie - elementy 'zawijane' będą rozmieszczane  od lewej do prawej.
column; elementy ' będą rozmieszczane pionowo.
column-reverse; kolumna-odwrócenie - elementy będą rozmieszczane pionowo w kolejności odwróconej
Zauważ, że jeśli zmienisz kierunek strony w Właściwościach strony od prawej do lewej (rtl), wszystkie kierunki zostaną odwrócone!
Opcja wyrównywania elementów (pionowo) określa  wyrównanie elementów w kontenerze, gdy elementy nie wykorzystują całej dostępnej przestrzeni na osi pionowej.
flex-start; elementy są umieszczane u góry kontenera.
flex-end; elementy są umieszczane u dołu kontenera.
center; elementy są umieszczane na środku kontenera (w pionie).
stretch; elementy są rozciągane tak aby pasowały do kontenera.
flex-start; linie są umieszczane od początku kontenera flex.
flex-end; linie są umieszczane od końca kontenera flex.
center; linie są umieszczane na środku kontenera flex.
space-between; linie  są rozmieszczane w kontenerze z odstepami .
space-around; linie są rozmieszczane tak że mają odstęp przed sobą i za sobą.
stretch; linie są rozciągane zajmując pozostałą przestrzeń.
Tryb wymiarowania określa, czy wysokość pojemnika zostanie uwzględniona.
Określa maksymalną szerokość kontenera flex w oknie przeglądarki. Może to być przydatne aby zapobiec nadmiernemu rozciąganiu jeśli okno przeglądarki jest szersze niż określona szerokość,kontener flex będzie wyśrodkowany.
Obiekty wewnątrz kontenera Flex (elementy giętkie) mają także własne właściwości ucieczki, które można ustawić za pomocą menu-> Aranżuj-> flexbox.
Właściwość flex-grow określa o ile obiekt zwiększy swój rozmiar w stosunku do reszty elastycznych elementów wewnątrz tego samego pojemnika flex.
Jeśli wszystkie obiekty mają flex-grow ustawione na 1, pozostała przestrzeń w kontenerze zostanie rozdzielona równomiernie na wszystkie obiekty. Jeśli jeden z obiektów ma wartość 2, to  zajmie (w miarę możliwości) przestrzeń dwukrotnie wiekszą w stosunku do pozostałych obiektów.
Ustawienie flex-shrink określa, w jaki sposób obiekt zmniejszy się względem pozostałych elementów elastycznych wewnątrz tego samego pojemnika flex
Właściwość flex-basis określa początkowy rozmiar obiektu przed rozdzieleniem pozostałej przestrzeni.
Długość może być podana w procentach lub pikselach. Jeśli ustawiono na "auto", dodatkowa przestrzeń jest rozdzielona w oparciu o wartość flex-grow (rozrost)
Ustawienie w align-self items flex zastępuje właściwość align-items dla tego obiektu.
flex-start, elementy są umieszczone na górze kontenera.
flex-end, elementy są umieszczone u dołu kontenera.
center , elementy są umieszczone po środku kontenera (pionowo).
stretch, elementy są rozciągane tak, aby pasowały do ​​kontenera.
auto, użyte zostanie domyślne wyrównanie na podstawie kontenera flex.
Tutaj możesz zobaczyć demo :
./flexbox.html





Podobne tutoriale:
./layoutgrid_part1.html
./layoutgrid_part2.html

flex-start; elementy są umieszczane na początku kontenera
flex-end; elementy są umieszczane na końcu kontenera
center elementy są umieszczane na środkuu kontenera
space-between; elementy są rozmieszczane z odstepami..
space-around; elementy są rozmieszczane tak że mają odstęp przed sobą i za sobą.
Opcja wyrównywania zawartości  modyfikuje opcję ustawioną we flex-wrap i działa podobnie jak wyrównówanie elementów (align items) ale odnośi się do linii.
Maximum width (maksymalna szerokość)
PL
PL
PL
Na podstawie:http://www.wysiwygwebbuilder.com/flexbox.html
Free access
Wyjście
---Home------Download------Zakup------Poradniki Online------Szablony------Wsparcie------Forum------Rozszerzenia------Manual------Rózne---
Copyright © 2017