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 −


 Live Demo

<!DOCTYPE html>
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);
<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>


The above code will produce the following output −

Published on 11-May-2020 08:59:35