0

I am a backend programmer by profession. But I have just started to learn flexbox and I want to hit the sky with flexbox.

So, I created a simplest design but which looks most complicated to me when creating it using flexbox.

Here is the design:

enter image description here

Guys, I am not able to figure out, how to use flexbox in such a case as there is no row or column. I don't know but is there anything like rowspan or colspan in flexbox that I can use to arrange these divs as shown in image above?

Here is my code:

HTML:

<div class="wrapper">
  <div class="div-wrapper1">
    <div class="inner-wrapper1">
      <div class="div1"></div>
      <div class="fake1"></div>
    </div>
    <div class="div2"></div>
  </div>  
  <div class="div-wrapper2">
    <div class="div3"></div>
    <div class="inner-wrapper2">
      <div class="fake2"></div>
      <div class="div4"></div>
    </div>
  </div>
  <div class="div-center"></div>
</div>

CSS:

.wrapper {
  height: 200px;
  width: 200px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.div-wrapper1 {
  display: flex;
  flex: 1;
}

.div-wrapper2 {
  display: flex;
  flex: 1
}

.inner-wrapper1 {
  display: flex;
  flex: 3;
  flex-direction: column; 
}

.div1 {
  background-color: red;
  display: flex;
  flex: 3
}

.fake1 { 
  display: flex;
  flex: 1
}

.div2 {
  background-color: green;
  display: flex;
  flex: 2
}

.div3 {
  background-color: blue;
  display: flex;
  flex: 2
}

.inner-wrapper2 {
  display: flex;
  flex: 3;
  flex-direction: column; 
}

.div4 {
  background-color: yellow;
  display: flex;
  flex: 3
}

.fake2 { 
  display: flex;
  flex: 1
}

.div-center {
  background-color: black;
}

This is my output:

enter image description here

Here is the codepen

6
  • @DavidThomas i don't want to use css grids. Because I am learning react-native and I want to apply it there where flexbox is supported.
    – Vishal
    Dec 20, 2017 at 19:43
  • 1
    Flexbox is not designed for this type of layout (where rows and columns can overlap). You would need Grid. stackoverflow.com/q/44377343/3597276 Dec 20, 2017 at 20:25
  • Will it be okay if the html is restructured?
    – user7207170
    Dec 20, 2017 at 20:25
  • @Highdef yes thats totally fine but only use css flexbox not grids
    – Vishal
    Dec 20, 2017 at 20:28
  • So it's not even that you're restricted from using grids for whatever reason, but simply because you're convinced flexbox is the one-size-fits-all solution and you simply refuse to use grids for something they were made to do?
    – BoltClock
    Dec 21, 2017 at 4:05

1 Answer 1

4

Maybe a solution is to simply add a negative margin to .div-wrapper1 and you will get the exact layout :

.wrapper {
  height: 200px;
  width: 200px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}

.div-wrapper1 {
  display: flex;
  flex: 1;
}

.div-wrapper2 {
  display: flex;
  flex: 1;
  margin-top: -30px;
}

.div-wrapper3 {
  display: flex;
  flex: 1
}

.inner-wrapper1 {
  display: flex;
  flex: 3;
  flex-direction: column; 
}

.div1 {
  background-color: red;
  display: flex;
  flex: 3
}

.fake1 { 
  display: flex;
  flex: 1
}

.div2 {
  background-color: green;
  display: flex;
  flex: 2
}

.div3 {
  background-color: blue;
  display: flex;
  flex: 2
}

.inner-wrapper2 {
  display: flex;
  flex: 3;
  flex-direction: column; 
}

.div4 {
  background-color: yellow;
  display: flex;
  flex: 3
}

.fake2 { 
  display: flex;
  flex: 1
}

.div-center {
  background-color: black;
}
<div class="wrapper">
  <div class="div-wrapper1">
    <div class="inner-wrapper1">
      <div class="div1"></div>
      <div class="fake1"></div>
    </div>
    <div class="div2"></div>
  </div>  
  <div class="div-wrapper2">
    <div class="div3"></div>
    <div class="inner-wrapper2">
      <div class="fake2"></div>
      <div class="div4"></div>
    </div>
  </div>
  <div class="div-center"></div>
</div>

And if you want here is another solution without any negative values and a content inside the white part (simply adjust height/width as you need) :

.first,
.second {
  display: flex;
  height: 100px;
  width: 200px;
}

.first:before {
  content: "";
  background: red;
  flex: 3;
}

.first:after {
  content: "";
  background: green;
  flex: 2;
}

.second:before {
  content: "";
  background: blue;
  flex: 2;
}

.second:after {
  content: "";
  background: yellow;
  flex: 3;
}

.fake {
  display: flex;
  height: 20px;
  width: 200px;
}

.fake a {
  flex: 1;
  text-align: center;
}

.fake:before {
  content: "";
  background: blue;
  flex: 2;
}

.fake:after {
  content: "";
  background: green;
  flex: 2;
}
<div class="first">
</div>
<div class="fake">
  <a href="">link</a>
</div>
<div class="second">
</div>

Here is another solution by simply using multiple linear-gradient:

.box {
  display: flex;
  height: 220px;
  width: 200px;
  justify-content: center;
  align-items: center;
  background-image:linear-gradient(to right,red 66%,green 0%),
                   linear-gradient(to right,blue 33%,white 0%,white 66%,green 66%),
                   linear-gradient(to right,blue 33%,yellow 0%);
  
  background-size:100% 100px,100% 20px,100% 100px;
  background-position:top,center,bottom;
  background-repeat:no-repeat;
}
<div class="box">
  <a href="#">link</a>
</div>

7
  • That's a good one. And what if I want to have a button in white area of the final output?
    – Vishal
    Dec 20, 2017 at 20:32
  • @Vishal check my updated, i added anothe solution :) and i will add a button in this part ;) Dec 20, 2017 at 20:33
  • @Vishal check again, it's more simplified now :) less HTML code Dec 20, 2017 at 20:37
  • Thanks again. As I am using react-native, I can't use your second solution because I don't think that I can use order and pseudo selectors there. But negative margin is also a good one for me.
    – Vishal
    Dec 20, 2017 at 20:40
  • @Vishal i removed order, they are useless at the end .. but you can replace before/after with simple divs ;) i used them to make the HTML more simple Dec 20, 2017 at 20:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.