html - Basic layout with CSS flexbox -


i'm designing basic layout using flexbox.

enter image description here

i've tried following code it's not working:

<div id="wrapper">     <div id="container">         <div id="div1">1</div>         <div id="div2">2</div>     </div>     <div id="div3"></div </div>  #wrapper {display:flex;flex-direction:row;} #div1, #div2 {display:block;} #container, #div3 {flex:1}; 

the code can changed needed.

you can use yor #container vertical flexible container, can share height between #div1 , #div2.

#wrapper {    display: flex;    width: 200px;    height: 200px;    border: 1px solid black;  }  #container,  #div1,  #div2,  #div3 {    flex: 1  }  #container {    display: flex;    flex-direction: column;    border-right: 1px solid black;  }  #div2 {    border-top: 1px solid black;  }
<div id="wrapper">      <div id="container">          <div id="div1"> div 1</div>          <div id="div2"> div 2</div>      </div>      <div id="div3"> div 3</div  </div>


Comments

Popular posts from this blog

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -