Controlling the Dimensions of Flex Items in CSS

CSSWeb DevelopmentFront 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>

Output

The above code will produce the following output −

raja
Published on 11-May-2020 12:29:35
Advertisements