html - Basic layout with CSS flexbox -
i'm designing basic layout using flexbox.
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
Post a Comment