Flex container with two columns; second column has four rows - html

Question

I am having difficulty displaying the following layout in flex. I have 5 boxes and I want to divide my container in two, displaying one box vertically and the other 4 vertically.
Here's my CSS:
.trades, .trade-panel {
flex: 1;
}
.layout-4-5 {
flex-direction: column;
}
.layout-4-5 > div {
width: 50%;
}
Then I set the basis of the fourth or last child to 100%.
.layout-4-5 > div:nth-child(1) {
flex-basis: 100%;
}
And here's my HTML
<div class="trades layout-4-5">
<!--trade-panel are my individual boxes --->
<div class="trade-panel">
</div>
</div>
Above print my layout horizontally. Considering My flex-direction is column and my first child or box has a 100% basis, shouldn't that print what I want? Please any help would be appreciated.
Note: Since the boxes are of equal size, the column containing the four other boxes should be longer, provided they are in the arrangement above, its ok. tq

Answer 1

I'm not entirely clear on your question or code. But here's a general solution:
flex-container-1 {
display: flex; /* establish flex container */
flex-direction: row; /* flex items will align horizontally */
justify-content: center; /* center flex items horizontally */
align-items: center; /* center flex items vertically */
/* for demo purposes only */
height: 250px;
width: 400px;
border: 1px solid #777;
background-color: lightgreen;
}
flex-container-1 > flex-item {
height: 90%;
flex: 0 0 45%; /* <flex-grow> <flex-shrink> <flex-basis> */
margin-right: 8px; /* a bit of space between the centered items */
border: 1px dashed #333;
background-color: yellow;
}
flex-container-2 {
height: 90%;
flex: 0 0 45%;
display: flex; /* flex item is now also flex container */
flex-direction: column; /* items will stack vertically */
justify-content: space-between; /* align items vertically */
}
flex-container-2 > flex-item {
flex: 0 0 22%;
border: 1px dashed #333;
background-color: yellow;
}
<flex-container-1><!-- main container -->
<flex-item></flex-item><!-- flex item #1 (first column) -->
<flex-container-2><!-- flex item #2 / nested flex container (second column) -->
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container-2><!-- close nested container -->
</flex-container-1><!-- close main container -->
jsFiddle

Answer 2

I struggled and struggled on this one and then serendipitously discovered a new solution to this problem right as I had decided to give up and use floats. I was finally able to get this to work without using separate DIVs for columns.
UPDATE: I have simplified my previous version of this by having the height specified on .items.
Provide non-percentage width and height to .items.
Use flex-direction: column on .items.
CSS:
.items {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 40em;
height: 20em;
}
.item:first-child {
width: 20em;
height: 20em;
background-color: black;
}
.item:nth-child(2) {
width: 20em;
height: 5em;
background-color: pink;
}
.item:nth-child(3) {
width: 20em;
height: 5em;
background-color: blue;
}
.item:nth-child(4) {
width: 20em;
height: 5em;
background-color: yellow;
}
.item:last-child {
width: 20em;
height: 5em;
background-color: red;
}
HTML:
<div class="items">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div><!-- .items -->
Codepen:
https://codepen.io/anon/pen/ZXoqJJ

Answer 3

I have give margin and background color property so you can better understand.
<div id="wrapper">
<div id="left">
<div class="flex-harshad">
<div class = "flex-harshad2">
Harshad
</div></div>
</div>
<div id="right">
<div class="flex-harshad">
<div class="flex-item">world</div>
<div class="flex-item">by</div>
<div class="flex-item">Alan</div>
<div class="flex-item">Dong</div>
</div>
</div>
</div>
Here is css.
body,
div {
margin: 0;
border: 0 none;
padding: 0;
}
html,
body,
#wrapper,
#left,
#right {
height: 100%;
min-height: 100%;
}
#wrapper {
margin: 0 auto;
overflow: hidden;
}
#left {
float: left;
}
div.flex-harshad2{
margin : 5px;
margin-top : 25px;
min-height: 91%;
background : white ;
width : 90px;
}
div.flex-harshad{
background: red;
height : 100%;
width : 100px;
text-align: center;
display : inline-block;
background :orange ;
margin :10px;
}
div.flex-item {
background: white;
margin: 5px;
margin-top : 25%;
min-height : 20%;;
/* remove text-lign will not center text itself */
text-align: center;
}
Here is output :

Answer 4

flex-container-1 {
display: flex; /* establish flex container */
flex-direction: row; /* flex items will align horizontally */
justify-content: center; /* center flex items horizontally */
align-items: center; /* center flex items vertically */
/* for demo purposes only */
height: 250px;
width: 400px;
border: 1px solid #777;
background-color: lightgreen;
}
flex-container-1 > flex-item {
height: 90%;
flex: 0 0 45%; /* <flex-grow> <flex-shrink> <flex-basis> */
margin-right: 8px; /* a bit of space between the centered items */
border: 1px dashed #333;
background-color: yellow;
}
flex-container-2 {
height: 90%;
flex: 0 0 45%;
display: flex; /* flex item is now also flex container */
flex-direction: column; /* items will stack vertically */
justify-content: space-between; /* align items vertically */
}
flex-container-2 > flex-item {
flex: 0 0 22%;
border: 1px dashed #333;
background-color: yellow;
}
<flex-container-1><!-- main container -->
<flex-item></flex-item><!-- flex item #1 (first column) -->
<flex-container-2><!-- flex item #2 / nested flex container (second column) -->
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
<flex-item></flex-item>
</flex-container-2><!-- close nested container -->
</flex-container-1><!-- close main container -->