Za pomocą właściwości flex-flow możemy określić kilka różnych cech sposobu układania się kolejnych elementów dzieci interesującego nas elementu HTML tworzącego układ elastyczny.
Informacje dodatkowe
brak
Dodatkowe techniczne informacje o właściwości flex-flow
nie (interpretuje od wersji 11, lecz z wieloma możliwymi błędami)
tak
Zobacz więcej informacji o interpretacji właściwości flex-flow.
Opis wartości właściwości flex-flow
grupa wartości
Opis
Za pomocą właściwości flex-flow oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech sposobu układania się kolejnych elementów dzieci interesującego nas elementu HTML tworzącego układ elastyczny.
/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */
/* REGUŁA - 1 */
div {
flex-flow:row-reverse wrap;
}
/* REGUŁA - 2 */
div {
flex-direction:row-reverse;
flex-wrap:wrap;
}
Składniki grupy wartości właściwości flex-flow
Ważne
podana przez nas grupa wartości właściwości flex-flow nie może zawierać wartości globalnych
Przykładowe zapisy
column
wrap
column wrap
direction
Składnik direction nie jest wymaganym składnikiem grupy wartości właściwości flex-flow. Składnik direction określa wartość właściwości flex-direction, czyli kierunek układania się kolejnych elementów dzieci interesującego nas elementu HTML tworzącego układ elastyczny.
Składnik wrap nie jest wymaganym składnikiem grupy wartości właściwości flex-flow. Składnik wrap określa wartość właściwości flex-wrap, czyli to czy elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny mogą zostać umieszczone (gdy jest to konieczne) w kolejnym anonimowym bloku.
Elementy dzieci przykładowego elementu "div#flexbox" posiadają odwrócony wierszowy kierunek układania się, ponadto elementy dzieci przykładowego elementu "div#flexbox", które nie mieszczą się w rozmiarze szerokości obszaru zawartości przykładowego elementu "div#flexbox" zostały umieszczone w wierszu kolejnego anonimowego bloku, ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "flex-flow" wraz z następującą grupą wartości: "row-reverse wrap".