Categories
CSS Web development

CSS flex-flow Property

CSS flex-flow Property

The CSS flex-flow property is a shorthand property for:

Syntax:

flex-flow: flex-direction flex-wrap;

flex-direction (value – row/ row-reverse/ column/ column-reverse) – defining the direction of the flexible items.

flex-wrap (value – nowrap/ wrap/ wrap-reverse) – defining whether the flexible items should wrap or not.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
#box-container {
  width: 200px;
  height: 200px;
  border: 3px solid #333;
  display: flex;
  flex-flow: row-reverse wrap;
}

#box-container div {
  width: 50px;
  height: 50px;
}
</style>
</head>
<body>

<div id="box-container">
  <div style="background-color:#264653;color: white;">1</div>
  <div style="background-color:#2a9d8f;">2</div>
  <div style="background-color:#e9c46a;">3</div>
  <div style="background-color:#e76f51;">4</div>
  <div style="background-color:#f4a261;">5</div>
  <div style="background-color:#264653;color: white;">6</div>
</div>

</body>
</html>

Output:

1
2
3
4
5
6

Note: Internet Explorer 10 and earlier versions do not support the flex-flow property!

Enjoy coding!

Read also:

CSS flex-wrap Property

CSS flex-grow Property

Categories
CSS Web development

CSS flex-direction Property

CSS flex-direction Property

The CSS flex-direction property defines the direction of the flexible items.

Demo:

Syntax:

flex-direction: row|row-reverse|column|column-reverse;

row (default) – the flexible items are displayed horizontally, as a row.

row-reverse – same as row, but in reverse order.

column – the flexible items are displayed vertically, as a column.

column-reverse – same as column, but in reverse order.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#box-content {
  width: 200px;
  height: 200px;
  border: 3px solid #333;
  display: flex;
  flex-direction: row-reverse; 
}

.a, .b, .c, .d, .e, .f {
  width: 50px;
  height: 50px;
}

.a {
  background-color:#264653;
  color: white;
}

.b {
  background-color:#2a9d8f;
}

.c {
  background-color:#e9c46a;
}
.d {
  background-color:#f4a261;
}

.e {
  background-color:#e76f51;
}

.f {
  background-color:#264653;
  color: white;
}

</style>
</head>
<body>

<div id="box-content">
  <div class="a">1</div>
  <div class="b">2</div>
  <div class="c">3</div>
  <div class="d">4</div>
  <div class="e">5</div>
  <div class="f">6</div>
</div>
    
</body>
</html>

Output:

1
2
3
4
5
6

Note: Internet Explorer 10 and earlier versions do not support the flex-direction property!

Enjoy coding!

Read also:

CSS flex-grow Property

CSS flex-shrink Property