CSS - flex-flow

Quiz

Description

The flex-flow is a CSS shorthand property determines both the alignment direction of a flex container and the wrapping behavior of its content.

This property enables flex items to wrap onto multiple lines in a horizontal row when they exceed the container's width.

Possible Values

row wrap

Applies to

All the HTML elements.

DOM Syntax

flex-flow: row wrap;

Here is the example which shows effect of this property −

<html>
<head>
<style>
   .my-flex-container {
      display: flex;
      flex-flow: row wrap;
      background-color: #0ca14a;
   }
   .my-flex-container div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <h3>As you resize the browser window, flex items should move to a new line in a horizontal row.</h3>
   <div class="my-flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div>Flex item 7</div>
   </div>
</body>
</html>

Print Page