Controlling the Dimensions of Flex Items in CSS

CSS Web Development Front End Technology

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

Example

Live Demo

<!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>