Computer >> Computer tutorials >  >> Programming >> CSS

Controlling the Dimensions of Flex Items in CSS


To control the dimensions of Flex Items in CSS, use the flex property. Following is the code controlling the dimensions of flex items −

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.container {
   display: flex;
   width: 100%;
}
div {
   width: 200px;
   height: 200px;
   color: white;
   text-align: center;
   font-size: 30px;
}
.first {
   background-color: rgb(55, 0, 255);
   flex: 2 1 auto;
}
.second {
   background-color: red;
}
.third {
   background-color: rgb(140, 0, 255);
}
</style>
</head>
<body>
<h1>Controlling flex items dimesions</h1>
<div class="container">
<div class="first">First Div</div>
<div class="second">Second Div</div>
<div class="third">Third Div</div>
</div>
</body>
</html>

Output

The above code will produce the following output −

Controlling the Dimensions of Flex Items in CSS