dream hunter dream hunter - 17 days ago 6
CSS Question

How to remove default space when using flex-box?



html,body{
height:100%;
width:100%;
}
#parent-container {
display: flex;
width:100%;
height: 100%;
/*flex-direction: column;*/
flex-wrap: wrap;
/*justify-content:space-between;*/
}

#rd-box{
width:100%;
background-color:rgba(176,39,39,1);
height: 25%;
}

#sky-box{
height: 50%;
background-color: rgba(0,255,255,1);
}

#yllw-box{
height: 25%;
background-color: rgba(255,242,0,1);
}

#grn-box{
height: 37.5%;
background-color: rgba(0,255,0,1);
}

#bl-box{
height: 37.5%;
background-color: rgba(0,33,87,1);
}

#item:nth-child(3){
order: 2;
}



/*---common styles----*/

.wd-half{
width: 50% ! important;
}

.item{
margin: 0px ! important;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="pro.css">
</head>
<body>
<div id="parent-container">
<div id="rd-box" class="item"> </div>
<div id="sky-box" class="item wd-half"> </div>
<div id="grn-box" class="item wd-half"> </div>
<div id="yllw-box" class="item wd-half"></div>

<div id="bl-box" class="item wd-half"> </div>
</div>
</body>
</html>





I'm new with flex box and that is why I asking this question.In the above code there is a default white space is generated between the green and blue part.how can I avoid that?.How can i fix this?.Is the structure need to be reconstructed?

I'm trying to achieve this

enter image description here

Answer

Solution (By Using a new div.sub-container):-

Flexbox grows in one direction either row or column. as your question deals with more than one direction (first div-row wise achievable. and others are column wise achievable) i have added one more div(div.sub-container) with flexbox and changed the height according to the div.sub-container.

html,body{
  height:100%;
  width:100%;
  overflow: hidden;
  margin: 0px;
  }
#parent-container {
    display: flex;
    width:100%;
    height: 100%;
    flex-wrap: wrap;
    /*justify-content:space-between;
    flex-direction: column;*/
}

#rd-box{
   width:100%;
   background-color:rgba(176,39,39,1);
   height: 25%;
}

#sky-box{
    height: 50%;
    background-color: rgba(0,255,255,1);
}

#yllw-box{
    height: 25%;
    background-color: rgba(255,242,0,1);
}

#grn-box{
    height: 37.5%;
    background-color: rgba(0,255,0,1);
}

#bl-box{
    height: 37.5%;
    background-color: rgba(0,33,87,1);
}

/*---common  styles----*/

.wd-half{
    width: 50% ! important;
}

.item{
    margin:  0px ! important;
}
.sub-container{
    height: 75%;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}
/*newly calculated height with respect to sub-container*/
.sub-container #sky-box{
    height: 66.6666666667%;
}
.sub-container #yllw-box{
    height: 33.3333333333%;
}
.sub-container #grn-box{
    height: 50%;
}
.sub-container #bl-box{
    height: 50%;
}
    <body>
        <div id="parent-container">
            <div id="rd-box" class="item">  </div>
            <div class="sub-container">
            <div id="sky-box" class="item wd-half"> </div>  
            <div id="yllw-box" class="item wd-half"></div>    
            <div id="grn-box" class="item wd-half"> </div>   
            
            <div id="bl-box" class="item wd-half">  </div>
            
            </div>
        </div>
    </body>

Partial Solution (Without flexbox):-

I am not going to use flexbox as flexbox grows in one direction either row or column. as your question deals with more than one direction (first div-row wise achievable. and others are column wise achievable) i am not sure this will work with flexbox. So i m giving you solution without flexbox

html,body{
  height:100%;
  width:100%;
  overflow: hidden;
  margin: 0px;
  }
#parent-container {
    width:100%;
    height: 100%;
}

#rd-box{
   width:100%;
   background-color:rgba(176,39,39,1);
   height: 25%;
}

#sky-box{
    height: 50%;
    background-color: rgba(0,255,255,1);
}

#yllw-box{
    height: 25%;
    background-color: rgba(255,242,0,1);
    clear: left;
}

#grn-box{
    height: 37.5%;
    background-color: rgba(0,255,0,1);
}

#bl-box{
    height: 37.5%;
    background-color: rgba(0,33,87,1);
}

.item:nth-child(3){/*
    order: 2;*/
}



/*---common  styles----*/

.wd-half{
    width: 50% ! important;
    float:left;
}

.item{
    margin:  0px ! important;
}
.sub-container{
  height:75%;
  width:50%;
  float:right;
  clear: right;
}
.sub-container div#grn-box,.sub-container div#bl-box{
  width:100% !important;
  height:50%;
  float:right;
}
    <body>
        <div id="parent-container">
            <div id="rd-box" class="item">  </div>
            <div id="sky-box" class="item wd-half"> </div>  
            <div class="sub-container">
            <div id="grn-box" class="item wd-half"> </div>   
            
            <div id="bl-box" class="item wd-half">  </div>
            
            </div>
            <div id="yllw-box" class="item wd-half"></div>    
        </div>
    </body>