Create Flexbox with media query overflowing divs - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

Create Flexbox with media query overflowing divs

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Flexbox media query overflowing divs</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
  <style>
.content-boxes {<!--from   w  w  w  . j a v  a2  s  . c om-->
   position:relative;
   display:flex;
   flex-flow:row wrap;
   width:100%;
   height:19%;
   justify-content:space-around;
   margin:2vw 2vw 2vw 2vw;
}

.content-boxes .content-box {
   display:flex;
   flex-flow:row wrap;
   width:24%;
   height:100%;
   background-color:Chartreuse;
   justify-content:space-between;
   flex:2;
   border:2px solid yellow;
}

.content-boxes .content-box span {
   padding:0.3vw;
   font-size:4vh;
   color:blue;
   overflow:hidden;
   font-family:CaviarDreams;
   width:100%;
}

.content-boxes .content-box p {
   padding:2vw;
   font-size:5vh;
   color:pink;
   overflow:hidden;
   font-family:CaviarDreams;
   text-align:right;
   align-self:center;
   margin-left:auto;
}

.content-boxes .content-box img {
   height:51%;
   align-self:flex-start;
   margin-left:2vw;
}

@media screen and (max-width: 650px)  {
   .content-boxes .content-box {
      flex:auto;
      width:100%;
   }

}
</style> 
 </head> 
 <body translate="no"> 
  <div class="content-boxes"> 
   <div class="content-box"> 
    <span>Something</span> 
    <img src="https://www.java2s.com/style/demo/Google-Chrome.png"> 
    <p> Number <br> </p> 
   </div> 
   <div class="content-box"> 
    <span>Something</span> 
    <img src="https://www.java2s.com/style/demo/Safari.png"> 
    <p> Number <br> </p> 
   </div> 
   <div class="content-box"> 
    <span>Something</span> 
    <img src="https://www.java2s.com/style/demo/Opera.png"> 
    <p> Number <br> </p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials