how to place a div under another div-CodePudding

    .flexbox{width:420px;
             height:300px;
             display:-webkit-box;
             display:box;
             -webkit-box-orientation:vertical;
             box-orientation:vertical;}
    .flexbox>div{-webkit-transition:ease-in;
                 transition:ease-in;
                 -webkit-border-radius:10px;
                 border-radius:10px;
                 border:solid black;
                 width:420px;
                 margin:-10px 10px 0px 10px;
                 padding:20px 20px 20px 20px;
                 box-shadow:10px 10px 10px dimgrey;}
    .flexbox>div:nth-child(1){background-color:lightgrey;}
    .flexbox>div:nth-child(2){background-color:lightgrey;}
    .flexbox>div:nth-child(3){background-color:lightgrey;}
    .flexbox>div:nth-child(4){background-color:lightgrey;}
    .flexbox>div:hover{height:500px;color:white;font-weight:bold;}
    .flexbox>div:nth-child(1):hover{background-color:blue;}
    .flexbox>div:nth-child(2):hover{background-color:red;}
    .flexbox>div:nth-child(3):hover{background-color:green;}
    .flexbox>div:nth-child(4):hover{background-color:orange;}
    }

       <div >
        <div><p>the first div content</p></div>
        <div><p>the second div content</p></div>
        <div><p>the third div content</p></div>
        <div><p>the fourth div content</p></div>
       </div>

this is my code and this is how the boxes are appearing. however, I want to place the second box under the first one, the third under the second, and lastly the fourth. and by under, I don't mean position:absolute, but on a new line

CodePudding user response：

You could let the items wrap with flex-wrap: wrap.

    .flexbox{width:420px;
             height:300px;
             display:-webkit-box;
             display:box;
             flex-wrap: wrap;
             -webkit-box-orientation:vertical;
             box-orientation:vertical;}
    .flexbox>div{-webkit-transition:ease-in;
                 transition:ease-in;
                 -webkit-border-radius:10px;
                 border-radius:10px;
                 border:solid black;
                 width:420px;
                 margin:-10px 10px 0px 10px;
                 padding:20px 20px 20px 20px;
                 box-shadow:10px 10px 10px dimgrey;}
    .flexbox>div:nth-child(1){background-color:lightgrey;}
    .flexbox>div:nth-child(2){background-color:lightgrey;}
    .flexbox>div:nth-child(3){background-color:lightgrey;}
    .flexbox>div:nth-child(4){background-color:lightgrey;}
    .flexbox>div:hover{height:500px;color:white;font-weight:bold;}
    .flexbox>div:nth-child(1):hover{background-color:blue;}
    .flexbox>div:nth-child(2):hover{background-color:red;}
    .flexbox>div:nth-child(3):hover{background-color:green;}
    .flexbox>div:nth-child(4):hover{background-color:orange;}
    }

  <div >
        <div><p>the first div content</p></div>
        <div><p>the second div content</p></div>
        <div><p>the third div content</p></div>
        <div><p>the fourth div content</p></div>
       </div>