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;
}
- 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.
- wrap
-
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.
flex-flow:row-reverse wrap;
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".
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#flexbox {
display:flex;
flex-flow:row-reverse wrap;
padding:1em;
font-size:1.3em;
background-color:#7DCDE8;
}
#flexbox > div {
padding:0.5em;
}
#flexbox > :nth-child(1) {
flex-basis:50%;
background-color:red;
}
#flexbox > :nth-child(2) {
flex-basis:25%;
background-color:orange;
}
#flexbox > :nth-child(3) {
flex-basis:40%;
background-color:yellow;
}
#flexbox > :nth-child(4) {
flex-basis:30%;
background-color:pink;
}
</style>
</head>
<body>
<div id="flexbox">
<div>div - 1</div>
<div>div - 2</div>
<div>div - 3</div>
<div>div - 4</div>
</div>
</body>
</html>
