<html lang="en">
    <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>
    <div class="Container">
    <p class="Item P1">FlexBox1</p>
    <p class="Item P2">FlexBox2</p>
    <p class="Item P3">FlexBox3</p>

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

    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;


   min-height: 200;


   min-height: 100; 


   min-height: 200;

    background-color: blue;
    display: flex;
    justify-content: space-around;

    border: gold solid ;

    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.