Basic layout with CSS flexbox

Question

I'm designing a basic layout using flexbox.

I've tried the following code but 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 be changed as needed.

tzi · Accepted Answer · 2016-01-28 01:32:14Z

1

You can use yor #container as a vertical flexible container, so you can share the height between #div1 and #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>

answered Jan 28, 2016 at 1:32

tzi

9,5892 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Basic layout with CSS flexbox

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related