Inline-flex element with clearfix - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

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

Description

Inline-flex element with clearfix

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">

.a, .b { border: 1px solid red; }
.a { text-align: center; }
.b { display: inline-flex; height: 20px; width: 20px; vertical-align: top; }
.cf:before,<!-- w  w w.  j  a v  a2 s . com-->
.cf:after {
   content: " ";
   display: table;
}
.cf:after {
   clear: both;
}


      </style> 
 </head> 
 <body> 
  <div class="a"> 
   <div class="b cf"></div> 
  </div>  
 </body>
</html>

Related Tutorials