CODESCRACKER

CSS flex-flow

The CSS flex-flow property is used to define flex-direction and flex-wrap at once. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .container{width:120px; display: flex; flex-flow: row wrap; background-color: brown;}
      .container div{border: 1px solid coral; padding: 12px; color: wheat;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div>E</div>
   </div>
   
</body>
</html>
Output
A
B
C
D
E

The first style rule sets the container class's width property to 120 pixels. It also changes the display and flex-flow properties to "flex" and "row wrap" respectively. This creates a flex container that arranges its child elements in a row before wrapping them to the next row if the container's width is exceeded. The background-color property is also set to "brown" to give the container a brown background.

The second style rule affects all div elements that are children of the container class. It sets the border property to "1px solid coral" to create a 1-pixel solid border in the color coral. It also increases the padding property to 12 pixels to add space between the div's content and its border. Finally, it changes the color property to "wheat" to make the text inside the div a light shade of wheat.

When this code is rendered in a web browser, the div elements inside the container will be laid out in a row, with a 1-pixel solid coral border and 12 pixels of padding around each element. When the width of the container is exceeded, the remaining div elements wrap to the next row. The background of the container will be brown. The text within the div elements will be a light wheat color.

CSS flex-flow syntax

The syntax of the flex-flow property in CSS is:

flex-flow: flex-direction flex-wrap | initial | inherit;

Note: The initial is used to use the default value whereas inherit is used to use the value inherited by the parent element.

The flex-flow property is used as shorthand for the following two properties:

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!