CSS - flex property

Quiz

Description

The flex property defines how the flex items grow, shrink, and allocate space along the flex container. It combines the flex-grow, flex-shrink, and flex-basis properties into a single shorthand.

Possible Values

integer value − Any valid integer value.

Applies to

All the HTML elements.

DOM Syntax

flex: any integer value;

Here is the example which shows effect of this property −

<html>
<head>
<style>
   .my_flex {
      display: flex;
      align-items: stretch;
      background-color: #0ca14a;
   }
   .my_flex div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my_flex">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div style="flex: 0 0 150px">Flex item 3</div>
      <div>Flex item 4</div>
      <div>Flex item 5</div>
      <div>Flex item 6</div>
      <div style="flex: 0 0 250px">Flex item 7</div>
      <div>Flex item 8</div>
   </div>
</body>

Print Page