flex - HTML CSS CSS Property

HTML CSS examples for CSS Property:flex

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

Description

The flex CSS property sets the components of a flexible length.

It is a shorthand property for setting the flex-grow, flex-shrink and the flex-basis properties.

The following table summarizes the flex Property.

Item Value
Default value: 0 1 auto; See individual properties
Applies to:Flex items
Inherited: No
Animatable: Yes, as each of the properties of the shorthand is animatable.

Syntax

The syntax of the property is as follows: 


flex:     [ flex-grow flex-shrink flex-basis ] | none | auto | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
flex-grow flex grow factor or positive flexibility.
flex-shrink flex shrink factor or negative flexibility.
flex-basis Set the initial size of the flex item.
noneEquivalent to setting flex to "0 0 auto".
autoEquivalent to setting flex to "1 1 auto".
initial Sets this property to its default value.
inherit take the value of its parent element flex property.

The example below shows the flex property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 flex Property</title>
  <style type="text/css">
  .flex-container {<!--   w  ww  .j a  v a2s . co  m-->
    width: 300px;
    height: 200px;
    font-size: 32px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex; /* Standard syntax */
  }
  .flex-container div {
    -webkit-flex: 1; /* Safari */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* Standard syntax */
  }
  .item1 {
    background: #e84d51;
  }
  .item2 {
    background: #7ed636;
  }
  .item3 {
    background: #2f97ff;
  }
</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