Responsive flexbox grid with different width of columns - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Column

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Column

Description

Responsive flexbox grid with different width of columns

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

.noselect {<!-- w  w w . ja  v a2  s.c  o m-->
   -webkit-touch-callout: none;
   /* iOS Safari */
   -webkit-user-select: none;
   /* Safari */
   -khtml-user-select: none;
   /* Konqueror HTML */
   -moz-user-select: none;
   /* Firefox */
   -ms-user-select: none;
   /* Internet Explorer/Edge */
   user-select: none;
   /* Non-prefixed version, currently
   supported by Chrome and Opera */
}
.selector-wrap {
   width: 100%;
   border: 1px solid;
   display: flex;
   justify-content: space-evenly;
}
.selector-wrap > div {
   display: flex;
   align-items: center;
}
.selector-wrap > div .control-wrap {
   display: flex;
   flex-flow: column;
   margin: 0px 0px 0px 12px;
   justify-content: space-between;
   height: 40px;
   width: 18px;
}
.selector-wrap > div .control-wrap .caret-wrap {
   cursor: pointer;
   font-size: 9px;
   text-align: center;
   padding: 4px 0px;
   border-left: 1px solid;
   border-right: 1px solid;
}
.selector-wrap > div .control-wrap .caret-wrap:hover {
   background: #ddd;
}
.selector-wrap > div .control-wrap .caret-wrap:active {
   color: grey;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="selector-wrap"> 
   <div> 
    <span>20</span> 
   </div> 
   <div> 
    <div class="control-wrap"> 
     <div class="caret-wrap"> 
      <span class="caret">?</span> 
     </div> 
     <div class="caret-wrap"> 
      <span class="caret">?</span> 
     </div> 
    </div> 
   </div> 
   <div> 
    <span>30</span> 
   </div> 
   <div> 
    <div class="control-wrap"> 
     <div class="caret-wrap"> 
      <span class="caret">A</span> 
     </div> 
     <div class="caret-wrap"> 
      <span class="caret">B</span> 
     </div> 
    </div> 
   </div> 
   <div> 
    <span>AM</span> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials