CSS - flex-basis

Description

CSS property flex-basis sets the initial size of a flex item on the main axis before distributing the remaining space among the flex items.

The flex-basisproperty can be defined using various units, such as pixels (px), percentages (%), ems (em), or even as a keyword like auto.

Possible Values

size - size in pixels.

Applies to

All the HTML elements.

DOM Syntax

flex-basis: size;

Here is the example which shows effect of this property −

<html>
<head>
<style>
   .my_flex_basis {
      display: flex;
      align-items: stretch;
      background-color: #0ca14a;
   }
   .my_flex_basis div {
      background-color: #FBFF22;
      padding: 10px;
      margin: 5px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="my_flex_basis">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div style="flex-basis:300px">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>Flex item 8</div>
   </div>
</body>
</html>