Flexbox Parent Attributes: align-content, justify-content, align-items - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Align

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

Description

Flexbox Parent Attributes: align-content, justify-content, align-items

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.category-container {<!--from   ww  w. j  a  v  a2  s  . c o  m-->
   padding:0 3% 0 3%;
   display:flex;
   flex-direction:row;
   flex-wrap:wrap;
   justify-content:flex-start;
   align-items:flex-start;
   align-content:flex-start;
}

.flexy {
   margin:6px 11px;
   padding-bottom:31px;
}

.categories {
   width:351px;
   height:421px;
   margin:auto;
   background-color:Chartreuse;
   padding:31px 16px 11px 16px;
   box-shadow:0 2px 4px yellow, 0 2px 3px rgba(0,0,0,0.25);
}
</style> 
 </head> 
 <body> 
  <div class="category-container"> 
   <!-- Repeat this section for all the blocks --> 
   <div class="flexy"> 
    <a href="#"> 
     <div class="categories"> 
      <h2>Title</h2> 
      <img src="https://www.java2s.com/style/demo/Opera.png"> 
      <p> This is an example description. my </p> 
     </div> </a> 
   </div> 
   <div class="flexy"> 
    <a href="#"> 
     <div class="categories"> 
      <h2>Title</h2> 
      <img src="https://www.java2s.com/style/demo/Safari.png"> 
      <p> This is an example description. my </p> 
     </div> </a> 
   </div> 
   <div class="flexy"> 
    <a href="#"> 
     <div class="categories"> 
      <h2>Title</h2> 
      <img src="https://www.java2s.com/style/demo/Safari.png"> 
      <p> This is an example description. my </p> 
     </div> </a> 
   </div> 
   <div class="flexy"> 
    <a href="#"> 
     <div class="categories"> 
      <h2>Title</h2> 
      <img src="https://www.java2s.com/style/demo/Safari.png"> 
      <p> This is an example description. my </p> 
     </div> </a> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials