/    /  CSS flex property

CSS flex property

 

This property specifies the components of a flexible length. This property is a shorthand property for setting the flex-grow, flex-shrink, and the flex-basis properties at once.

 

Syntax:

 

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

 

Property Values:

 

  • flex-grow Flex grows factor or positive flexibility for the flex item.
  • flex-shrink Flex shrink factor or negative flexibility for the flex item.
  • flex-basis Initial size of the flex item.
  • none Equivalent to setting flex to 0 0 auto.
  • auto Equivalent to setting flex to 1 1 auto.
  • initial Its default value.
  • inherit Its parent element flex property.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<title>
CSS flex Property
</title>

<style>
.container {
width: 200px;
height: 100px;
border: 1px solid black;
display: flex;
margin: 15px;
background-color: pink;
}

.flex-item{
flex: 1; // unitless number: flex-grow
}
.flex-item1{
flex: 0 50px; // flex-grow, flex-basis
}
.flex-item2{
flex: 2 2; // flex-grow, flex-shrink
}
.flex-item, .flex-item1, .flex-item2 {
background-color: lightblue;
margin: 4px;
}
</style>
</head>

<body>
<h3> flex: 1; </h3>
<div class = "container">
<div class = "flex-item">
</div>
<div class = "flex-item">
</div>
<div class = "flex-item">
</div>
</div>
<h3> flex: 0 50px; </h3>
<div class = "container">
<div class = "flex-item1">
</div>
<div class = "flex-item1">
</div>
<div class = "flex-item1">
</div>
</div>
<h3> flex: 2 2; </h3>
<div class = "container">
<div class = "flex-item2">
</div>
<div class = "flex-item2">
</div>
<div class = "flex-item2">
</div>
</div>
</body>
</html>

 

OUTPUT:

 

CSS flex property