flex-basis - HTML CSS CSS Property

HTML CSS examples for CSS Property:flex-basis

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. flex-basis

Description

The flex-basis CSS property sets the initial main size of the flex item.

The following table summarizes the flex-basis Property

Item Value
Default value: auto
Applies to:Flex items
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 


flex-basis:     width | auto | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
width A length that sets the initial length of the flexible item. Negative values are invalid.
autoThe width of the flexible item is equal to the value of it's width property. This is default value.
initial Sets this property to its default value.
inherit take the value of its parent element flex-basis property.

The example below shows the flex-basis property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 flex-basis Property</title>
  <style type="text/css">
  .flex-container {<!--from  w ww  .  j av  a  2 s  .  co  m-->
    width: 300px;
    height: 200px;
    font-size: 32px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex; /* Standard syntax */
  }
  .item1 {
    background: #e84d51;
    -webkit-flex-basis: 150px; /* Safari */
    -ms-flex-basis: 150px; /* IE 10 */
    flex-basis: 150px;
  }
  .item2 {
    background: #7ed636;
    -webkit-flex-basis: 40%; /* Safari */
    -ms-flex-basis: 40%; /* IE 10 */
    flex-basis: 40%;
  }
  .item3 {
    background: #2f97ff;
    width: 50px;
  }
</style>
 </head>
 <body>
  <div class="flex-container">
   <div class="item1">
    1
   </div>
   <div class="item2">
    2
   </div>
   <div class="item3">
    3
   </div>
  </div>
 </body>
</html>

Related Tutorials