1) What is flex property in CSS?
==> The flex-flow property is a sub-property of the flexible box layout module and also a shorthand property for flex-wrap and flex-direction as well as its wrapping behavior.
* syntax of flex-flow with value:
/* flex-flow: <'flex-direction> */ flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse;
/* flex-flow: <'flex-wrap> */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; /* flex-flow: <'flex-direction> and <'flex-wrap> */ flex-flow: row nowrap; flex-flow: column wrap; flex-flow: column-reverse wrap-reverse; /* Global values */ flex-flow: inherit; flex-flow: initial; flex-flow: revert; flex-flow: revert-layer; flex-flow: unset;
* few examples of flex-flow :
1) row nowrap: It arranges the row the same as the text direction and the default value of wrap-flex is nowrap. It is used to specify that the item has no wrap. It makes items wrapped in single lines.
<!DOCTYPE html>
<head>
<title>flex-flow property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 2px solid black;
display: flex;
flex-flow: row nowrap;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color: #009900;
font-size: 42px;
margin-left: 50px;
}
h3 {
margin-top: -20px;
margin-left: 50px;
}
</style>
</head>
<body>
<h3>The flex-flow:row nowrap</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
output :
2) row-reverse nowrap: It arranges the row opposite of the text direction and the default value of wrap-flex is nowrap. It is used to specify that the item has no wrap. It makes item wrapped in single lines.
<!DOCTYPE html>
<head>
<title>flex-flow property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 2px solid black;
display: flex;
flex-flow: row-reverse nowrap;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color: #009900;
font-size: 42px;
margin-left: 50px;
}
h3 {
margin-top: -20px;
margin-left: 50px;
}
</style>
</head>
<body>
<h3>The flex-flow:row-reverse nowrap</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
output :
3) column nowrap : same as row but top to bottom and the default value of wrap-flex is nowrap. It is used to specify that the item has no wrap. It makes items wrapped in single lines.
<!DOCTYPE html>
<head>
<title>flex-flow property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 2px solid black;
display: flex;
flex-flow: column nowrap;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color: #009900;
font-size: 42px;
margin-left: 50px;
}
h3 {
margin-top: -20px;
margin-left: 50px;
}
</style>
</head>
<body>
<h3>The flex-flow:column nowrap</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
output:
output:
4) column-reverse nowrap: Same as row-reverse top to bottom and the default value of wrap-flex is nowrap. It is used to specify that the item has no wrap. It makes items wrapped in single lines.
<!DOCTYPE html>
<head>
<title>flex-flow property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 2px solid black;
display: flex;
flex-flow: column-reverse nowrap;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color: #009900;
font-size: 42px;
margin-left: 50px;
}
h3 {
margin-top: -20px;
margin-left: 50px;
}
</style>
</head>
<body>
<h3>The flex-flow:column-reverse nowrap</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
output:
5) row-reverse wrap-reverse: It arranges the row in opposite text direction and wrap-reverse property This property is used to reverse the flow of the flex items when they wrap to new lines.
<!DOCTYPE html>
<head>
<title>flex-flow property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 2px solid black;
display: flex;
flex-flow: row-reverse wrap-reverse;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color: #009900;
font-size: 42px;
margin-left: 50px;
}
h3 {
margin-top: -20px;
margin-left: 50px;
}
</style>
</head>
<body>
<h3>The flex-flow:row-reverse wrap-reversep</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
output:
6) column-reverse wrap-reverse: It arranges the row the same as the row-reverse top to bottom and wrap-reverse property This property is used to reverse the flow of the flex items when they wrap to new lines.
<!DOCTYPE html>
<head>
<title>flex-flow property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 2px solid black;
display: flex;
flex-flow: column-reverse wrap-reverse;
}
#main div {
width: 100px;
height: 50px;
}
h1 {
color: #009900;
font-size: 42px;
margin-left: 50px;
}
h3 {
margin-top: -20px;
margin-left: 50px;
}
</style>
</head>
<body>
<h3>The flex-flow:column-reverse wrap-reverse</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
<div style="background-color:#660066;">5</div>
<div style="background-color:#663300;">6</div>
</div>
</body>
</html>
output:
//======================= END ============================//
