Is it possible to create a column in flex rows?

Question

Below this text is a screenshot of the layout i have written in flexbox.

Is it possible to achive a layout such that the red rectangle would be below the black rectangel with the use of flexbox?

This is the code i wrote to create this layout:

#container{
  display: flex;
  flex-flow: row wrap;

  height: 409px;
  width: 800px;
}

#firstof3 {
  flex: 0 0 30%; /* Let it fill the entire space horizontally */
  height: 100px;
  background-color: yellow;
}

#secondof3 {
  flex: 0 0 60%; /* Let it fill the entire space horizontally */
  height: 100px;
  background-color: blue;
}

#thirdof3 {
  flex: 0 0 10%; /* Let it fill the entire space horizontally */
  height: 100px;
  background-color: green;
}

#image {
  flex: 0 0 30%; /* ~ 2 * 33.33% */
  height: calc(100% - 100px); /* excluding the height of the header */
  background-color: lightgray;
}

#firstrowof3 {
  flex: 0 0 66%; /* ~ 2 * 33.33% */
  height: 100px; /* excluding the height of the header */
  background-color: black;
}

#secondrowof3 {
  flex: 0 0 66%; /* ~ 2 * 33.33% */
  height: 200px; /* excluding the height of the header */
  background-color: red;
}

user_12213896 · Answer

Can you please check the below code? Hope it will work for you. We can achieve this type of design using float.

#container{

  height: 409px;
  width: 800px;
}
#container > div { float : left }

#firstof3 {
  width:30%; /* Let it fill the entire space horizontally */
  height: 100px;
  background-color: yellow;
}

#secondof3 {
  width:60%; /* Let it fill the entire space horizontally */
  height: 100px;
  background-color: blue;
}

#thirdof3 {
  width:10%; /* Let it fill the entire space horizontally */
  height: 100px;
  background-color: green;
}

#image {
  width:30%; /* ~ 2 * 33.33% */
  height: calc(100% - 100px); /* excluding the height of the header */
  background-color: lightgray;
}

#firstrowof3 {
  width: 66%; /* ~ 2 * 33.33% */
  height: 100px; /* excluding the height of the header */
  background-color: black;
}

#secondrowof3 {
  width: 66%; /* ~ 2 * 33.33% */
  height: 200px; /* excluding the height of the header */
  background-color: red;
}

user_6938969 · Answer

Indeed it is possible to create this layout and any layout with CSS Flexbox. But CSS Grids makes it quite easy to work with Complex layouts.

I am providing both Flexbox as well as CSS-Grid solutions to your problem.

Note that CSS-Grids used pretty less HTML and CSS as it is two-dimensional grid.

And on the other hand:

Flexbox needs to be efficiently thought of and wrapper needs to be added since it is one-dimensional

Below is the Pure CSS Flexbox Layout Solution:

CODEPEN LINK FLEXBOX:

https://codepen.io/emmeiWhite/pen/BaLVNbM

And CSS-Grid Solution for the same is this:

CODEPEN LINK CSS-GRIDS:

https://codepen.io/emmeiWhite/pen/GRjGpNe

Pleaes Note: You may require basic CSS adjustments as per your dimensions.

CSS-FLEXBOX CODE:

#container{
  display:flex;
  width:900px;
  min-height:500px;
  border:1px solid #ccc;
  flex-direction:column;
}

.upper-wrapper{
  height:100px;
  display:flex;
}

#firstof3{
  flex:2;
  background:yellow;
}

#secondof3{
  flex:4;
  background:blue;
}

#thirdof3{
  flex:1;
  background:green;
}


/* --- lower wrapper --- */

.lower-wrapper{
  display:flex;
  height:100%;
}

#image{
  flex:2;
  background:#ccc;
  height:400px;
}

.inner-wrapper{
  flex:5;
  display:flex;
  flex-direction:column;
}

#firstrowof3{
  flex:1;
  background:black;
}

#secondrowof3{
  flex:4;
  background:orange;
}

CSS-GRID CODE:

#container{
  display:grid;
  height:400px;
  width:700px;
  background:orange;
  grid-template- columns:repeat(6,1fr);
  grid-auto-rows:minmax(100px,auto);
  grid-template-areas:
    "firstof3 firstof3 secondof3 secondof3 secondof3 thirdof3"
    "image image firstrowof3 firstrowof3 firstrowof3 firstrowof3"
    "image image secondrowof3 secondrowof3 secondrowof3 secondrowof3"
    "image image secondrowof3 secondrowof3 secondrowof3 secondrowof3"
    "image image secondrowof3 secondrowof3 secondrowof3 secondrowof3";
    
    
}

#firstof3{
  grid-area:firstof3;
  background:yellow;
}

#secondof3{
  grid-area:secondof3;
  background:blue;
}

#thirdof3{
  grid-area:thirdof3;
  background:green;
}

#image{
  grid-area:image;
  background:#777;
}

#firstrowof3{
  grid-area:firstrowof3;
  background:black;
}

#secondrowof3{
  grid-area:secondrowof3;
  background:red;
}

Is it possible to create a column in flex rows?

2 Answers