<html lang="en">
<head>
    <link rel="stylesheet" href="Flex.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlexBox test</title>
</head>
<body>
    <div class="Container">
    <p class="Item P1">FlexBox1</p>
    <p class="Item P2">FlexBox2</p>
    <p class="Item P3">FlexBox3</p>
    </div>

     <div class="FlexBox-container">
    <div class="FlexBox-Item Flex1">Box1</div>
    <div class="FlexBox-Item Flex2">Box2</div>
    <div class="FlexBox-Item Flex3">Box3</div>
    </div> 
    
</body>
</html>

.FlexBox-container{ 
    
    display: flex;
    background-color: red;
    border:  10px  blue solid;
     justify-content: center;
    /*justify-content: center;  horizontal */
    
   font-size: 100;
   

}

.FlexBox-Item{ /* item properties are meant to control the layout of the items like width and height or positioning.*/
    
    width: 200px;
    margin: 10px;
    border: 3px solid black;
    background-color: grey;
  

}

.Flex1{
   min-height: 200;
  

}

.Flex2{
   min-height: 100; 
   
   

}

.Flex3{
   min-height: 200;
  
    
}






.Container{
    background-color: blue;
    display: flex;
    justify-content: space-around;
  
    
}

.P1{
    border: gold solid ;
}

.P2{
    border: gold solid;
}

.P3 {
    border: gold solid;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.