CSS Flex

CSS Flex

by krishna chaitanya nalluri

HTML

<div id="container">
   <div id="a">
       <img       src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" width="90" height="90">
   </div>
   <div id="b">
      <span>b</span>
   </div>
   <div id="c">
      <span>c</span>
   </div>
</div>

CSS

#container {
   width: 500px;
   border: solid 1px #000;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
}

#a {
   width: 20%;
   border: solid 1px #000;
   text-align: center;
   vertical-align: middle;
   line-height: 90px;
}

#a span {
 width:100%;
 color:red;
}

#b {
   width: 60%;
   border: solid 1px #000;
   height: 200px;
     text-align: center;
   vertical-align: middle;
   line-height: 90px;
}
#c {
   width: 20%;
   border: solid 1px #000;
   height: 200px;
     text-align: center;
   vertical-align: middle;
   line-height: 90px;
}