Question

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>

我是Flex盒子的新手，这就是我问这个问题的原因。在上面的代码中，绿色和蓝色部分之间有一个默认的空白区域。我可以避免吗？。我怎么能解决这个问题？。结构是否需要重建？

我正在努力实现这个目标

Answer 1

您需要为此更改标记。

我可以通过执行以下操作来实现。检查此代码段

＆＃13;

html,
body {
  height: 100%;
  width: 100%;
}
.parentcontainer {
  height: 100%;
  width: 100%;
}
.second {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
#rd-box {
  background-color: rgba(176, 39, 39, 1);
  height: 25%;
}
#sky-box {
  width: 50%;
  height: 50%;
  background-color: rgba(0, 255, 255, 1);
}
#grn-box {
  width: 50%;
  height: 37.5%;
  background-color: rgba(0, 255, 0, 1);
}
#yllw-box {
  width: 50%;
  height: 25%;
  background-color: rgba(255, 242, 0, 1);
}
#bl-box {
  width: 50%;
  height: 37.5%;
  background-color: rgba(0, 33, 87, 1);
}

＆＃13;

<div class="parentcontainer">
  <div id="rd-box"></div>

  <div class="second">
    <div id="sky-box" class="wd-half"></div>
    <div id="yllw-box"></div>
    <div id="grn-box">

    </div>

    <div id="bl-box"></div>
  </div>

</div>

＆＃13;

希望这有帮助

Answer 2

解决方案（使用新的div.sub-container）： -

Flexbox在行或列的一个方向上增长。因为你的问题涉及不止一个方向（第一个div-row明智的可实现。而其他的是列可实现的）我已经添加了一个div（div.sub-container）与flexbox和改变了高度根据{{1}}。

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%;
}

部分解决方案（不使用flexbox）： -

我不打算使用flexbox，因为flexbox在行或列的一个方向上增长。因为你的问题涉及不止一个方向（第一个div-row明智的可实现。而其他方面是列可实现的）我不确定这将适用于flexbox。所以我给你解决方案没有flexbox

    <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>

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;
}

Answer 3

从容器中取出红色div id="rd-box"并取消注释flex-direction: column;规则。像这样：

    <div id="rd-box" class="item"></div>
    <div id="parent-container">
        <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>

并更改CSS规则

    #parent-container {
        display: flex;
        width:100%;
        height: 100%;
        flex-direction: column;
        flex-wrap: wrap;
    }

然后你应该检查你的％数学，正如一些评论所提到的那样，他们不匹配100％

如何在使用flex-box时删除默认空间？

3 个答案: