Question

我遇到了一个需要解决的问题。我正在编写一个管理面板。我正在使用flexbox，我有3个div彼此相邻。代码如下所示：

<div class="content-boxes">
    <div class="content-box">
      <span>Something</span>
      <img src="image.png">
      <p>
        Number<br>
      </p>
    </div>

    <div class="content-box">
      <span>Something</span>
      <img src="image.png">
      <p>
        Number<br>
      </p>
    </div>

    <div class="content-box">
      <span>Something</span>
      <img src="image.png">
      <p>
        Number<br>
      </p>
    </div>
  </div>

CSS代码（SASS）：

.content-boxes{
  position: relative;
  @include flexbox();
  flex-flow: row wrap;
  width: 100%;
  height: 18%;
  justify-content: space-around;
  margin: 1vw 1vw 1vw 1vw;
  .content-box{
    @include flexbox();
    flex-flow: row wrap;
    width:23%;
    height:100%;
    background-color: $oc-red-8;
    justify-content: space-between;
    flex: 1;
    span{
      padding: 0.2vw;
      font-size: 3vh;
      color: $oc-gray-2;
      overflow: hidden;
      font-family: CaviarDreams;
      width: 100%;
    }
    p{
      padding: 1vw;
      font-size: 4vh;
      color: $oc-gray-2;
      overflow: hidden;
      font-family: CaviarDreams;
      text-align: right;
      align-self: center;
      margin-left: auto;
    }
    img{
      height: 50%;
      align-self: flex-start;
      margin-left: 1vw;
    }
  }
}

我的问题是，当我使用媒体查询并希望盒子宽度为：100％;作为flex的其他div正在溢出这个。

媒体查询代码：

@media screen and (max-width: 650px){
  .content-boxes{
    .content-box{
       width: 100%;
    }
  }
}

我希望我的所有div都在宽度：100％;

我希望自己明确表达，有什么建议吗？

Answer 1

您只需更改flex的方向并使其成为列而不是行：

  foreach($query as $sefer){
        $choices = array();
        $inputs = array();

        if ( $field->id != $field_id ) {continue;}

Answer 2

解决方案将是那样的

您定义flex: 1

表示内容框：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

并且您希望媒体查询中的宽度为100％，然后您必须定义此

flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;

这是您已定义flex: auto

的快捷方式width 100%

@media screen and (max-width: 650px){
  .content-boxes{
    .content-box{
      flex: auto;
      width: 100%;
    }
  }
}

所以它会在彼此之下

这里是codepen link

Flexbox媒体查询溢出div

2 个答案: