Using Flex-box to display children divs side by side in a row - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex

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

Description

Using Flex-box to display children divs side by side in a row

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.apparent-message {<!--from   w w  w . j  a v a2  s  .  co m-->
   border-style:solid;
   border-width:3px;
}

.apparent-message .apparent-message-icon {
   margin:11px;
   display:flex;
   align-items:center;
   justify-content:center;
   font-size:31px;
   color:Chartreuse;
   text-shadow:3px 3px 0px yellow;
}

.apparent-message .apparent-message-icon .fa-2x {
   box-shadow:4px 4px 4px blue;
}

.message-container {
   display:flex;
}

.message-container .content-container {
   flex-basis:0;
   flex-grow:2;
   width:100%;
   display:flex;
   justify-content:center;
   flex-direction:row;
   padding-left:16px;
   background-color:pink;
   position:relative;
   padding:11px;
}

.message-container .content-container .message-body {
   position:relative;
   font-size:2.144em;
   color:WhiteSmoke;
   width:56%;
}

.message-container .content-container .message-action {
   color:OrangeRed;
   position:relative;
   width:46%;
}

.warning-message {
   background-color:grey;
   border-color:BlueViolet;
}

.warning-message .message-header {
   color:Chartreuse;
}

.warning-message .message-action {
   color:yellow;
}

#section-header {
   display:block;
   min-height:46px;
   background-color:blue;
   margin-bottom:21px;
   box-shadow:4px 4px 4px pink;
}
</style> 
 </head> 
 <body translate="no"> 
  <div id="section-header"> 
   <div class="apparent-message warning-message"> 
    <div class="message-container"> 
     <div class="apparent-message-icon fa fa-fw fa-2x fa-exclamation-triangle">
       MyIcon 
     </div> 
     <div class="content-container"> 
      <div class="message-body">
        Set this section to visible as information is set to be displayed. 
      </div> 
      <div class="message-action">
        Actions 
      </div> 
     </div> 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials