flex-shrink - HTML CSS CSS Property

HTML CSS examples for CSS Property:flex-shrink

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

Description

The flex-shrink CSS property sets how the flex item will shrink relative to the other items.

The following table summarizes the flex-shrink Property.

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

Syntax

The syntax of the property is as follows: 


flex-shrink:     number | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
number determines the flex shrink factor. The default value is 1. Negative numbers are invalid.
initial Sets this property to its default value.
inherit take the value of its parent element flex-shrink property.

The example below shows the flex-shrink property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 flex-shrink Property</title>
  <style type="text/css">
  .flex-container {<!--from  ww  w.j  a va 2s  .c  om-->
    width: 300px;
    height: 200px;
    font-size: 32px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex; /* Standard syntax */
  }
  .item1 {
    width: 150px;
    background: #e84d51;
    -webkit-flex-shrink: 1; /* Safari 6.1+ */
    flex-shrink: 1;
  }
  .item2 {
    width: 150px;
    background: #7ed636;
    -webkit-flex-shrink: 2; /* Safari 6.1+ */
    flex-shrink: 2;
  }
  .item3 {
    width: 150px;
    background: #2f97ff;
    -webkit-flex-shrink: 3; /* Safari 6.1+ */
    flex-shrink: 3;
  }
</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