Flexbox - (flex-flow applied to the container) - Learn coding, chatgpt Tutorials

The flex-flow property is the shorthand format for initializing the "flex-direction" and "flex-wrap" properties.

The syntax to define this property is:

flex-flow: "flex-direction value" "flex-wrap value"

Let's now see an example of a flexible box with 7 items.

page1.html

<!DOCTYPE html>
<html>

<head>
    <title>Problem</title>
    <meta charset="UTF-8">
    <link rel="StyleSheet" href="styles.css" type="text/css">
</head>

<body>
    <div id="container1">
        <div class="item">Box 1</div>
        <div class="item">Box 2</div>
        <div class="item">Box 3</div>
        <div class="item">Box 4</div>
        <div class="item">Box 5</div>
        <div class="item">Box 6</div>
        <div class="item">Box 7</div>
    </div>
</body>

</html>

styles.css

#container1{
  display: flex;
  flex flow: rowwrap;
  background-color: #000;  
  height: 400px;
  color:white;
  font-size:2rem;
}

.item {
  background-color: #0078A6;
  width:150px;
  height:150px;
}

We define the flex-flow property with the value:

flex-flow: row-wrap;

Robort Gabriel

Lagos, Nigeria

Skills