Flexbox layout using div to make panel with title, author name and paragraph - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

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

Description

Flexbox layout using div to make panel with title, author name and paragraph

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

ul, li {
   margin: 0;
   padding: 0;
   color: #524c43;
}
ul {<!--   w w w.j  a  va  2s .c o  m-->
   border: 2px solid #524c43;
   -webkit-border-radius: 50px 0px 0px 50px;
   border-radius: 50px 0px 0px 50px;
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
   box-shadow:         7px 7px 5px rgba(50, 50, 50, 0.75);
}
li {
   display: block;
   line-height: 1.27;
   padding: 5px;
   margin: 0;
   list-style-type: none;
   min-width: -webkit-min-content;
   min-width: -moz-min-content;
   min-width: min-content;
}
li img {
   display: block;
   -webkit-border-radius: 50px 0px 0px 50px;
   border-radius: 50px 0px 0px 50px;
}


      </style> 
 </head> 
 <body> 
  <ul> 
   <li style="max-width: 200px;"> <img src="https://www.java2s.com/style/demo/Safari.png"> </li> 
   <li style="max-width: 400px;"> 
   <h2>this is a test this is a test</h2> 
   <h3>this is a tes this is a test</h3> <p>
   this is a test this is a tes theia sdf asd f asd fa sdf asdf</p> </li> 
  </ul>  
 </body>
</html>

Related Tutorials