Make flexbox wrap rows upside-down - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Wrap

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

Description

Make flexbox wrap rows upside-down

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Flexbox wrap question</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.too-narrow-container {<!--from  www . ja v a2  s .c  o  m-->
   width: 30em;
   margin: 1em;
}
ul.fruits {
   display: flex;
   padding: 0.25em;
   border: 1px solid #CCC;
   background: #DDD;
   box-shadow: 1px 1px 2px #BBB inset;
   writing-mode: horizontal-bt; 
   flex-flow: row wrap-reverse;
   justify-content: flex-start;
   align-items: flex-end;
   align-content: flex-end;
}
ul.fruits li {
   display: block;
   list-style: none;
   margin: 0.25em;
   padding: 0.5em 1em;
   background: #FFC;
   border: 1px solid #CC9;
   border-radius: 4px;
   box-shadow: 1px 1px 2px #999;
}


      </style> 
 </head> 
 <body> 
  <div class="too-narrow-container"> 
   <ul class="fruits"> 
    <li>Apple</li> 
    <li>Banana</li> 
    <li>Cherry</li> 
    <li>Date</li> 
    <li>Elderberry</li> 
    <li>Fig</li> 
    <li>Grape</li> 
    <li>Honeydew</li> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials