Question

尝试使用Flexbox排列div，甚至不确定我想做什么。

希望看到769像素是要使F列向下扩展容器的整个高度，而G和H则彼此堆叠在右侧的顶部（运行代码段以查看）。

一旦屏幕分辨率低于768，我当前拥有的外观就是该视图的理想结果（同一行中的F和G，而H和H都跨越了两者的宽度）。

body {
    background: #f5f5f5;
}
.wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px;
}
.title {
    font-family: 'Montserrat';
    font-size: 24px;
    line-height: 30px;
    display: inline-block;
    vertical-align: middle;
}
.card {
    margin: 20px 0;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
    background-color: #fff;
}
.container.show-border, .element.show-border {
    border: 1px red solid;
    padding: 9px;
}
.content {
    color: #fff;
    background-color: #cccccc;
    padding: 20px;
    font-family: 'Montserrat';
    font-size: calc(1vw + 1em);
}

@media (max-width: 375px) {
.content {
    padding: 5px;
    font-size: 0;
    text-indent: -9999999em;
}
}
.container, .element {
    padding: 10px;
}
.flex {
    display: flex;
    box-sizing: border-box;
}
.row {
    flex-flow: row wrap;
}
.col {
    flex-flow: column wrap;
}
.element {
    min-width: 100px;
}
.content {
    flex: 1 100%;
}
.structure {
    min-height: 480px;
}
.structure-2 {
    flex: 1 44.4444444444%;
}
.f {
    flex: 1 25%;
    min-height: 480px;
}
.g {
    flex: 1 75%;
}
.h {
    flex: 1 75%;
}

@media (max-width : 768px ){
.structure-2,  .f, .g {
    flex: 1 50%;
    min-height: 480px;
}
.h {
    flex: 1 100%;
    min-height: 480px;
}
}

		<p>This table is a visual representation of what I am trying to accomplish at 769 px or higher. The view at 768 pixels or lower is as I want.</p>
		<table width="200" border="1">
  <tbody>
    <tr>
      <td rowspan="2">F</td>
      <td>G</td>
    </tr>
    <tr>
      <td>H</td>
    </tr>
  </tbody>
  </table>
    <div class="wrap">
      <div class="container card">
        <div class="flex row structure">
          <div class="flex row structure-2">
            <div class="flex element f">
              <div class="content"> F </div>
            </div>
            <div class="flex element g">
              <div class="content"> G </div>
            </div>
            <div class="flex element h">
              <div class="content"> H </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

您可以在769px;之后更改弯曲方向。像这样：

@media (min-width: 769px ){
    .structure-2{
        flex-direction: column;
        flex-wrap: wrap;
    }

    .element{
       flex: 1 1 auto;
       width:50%;
    }

    .f{
        height:100%;
    }
}

P.S。我也将您的@media (max-width : 1608px )更改为@media (max-width : 768px )，以消除一些冲突。

body {
    background: #f5f5f5;
}
.wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px;
}
.title {
    font-family: 'Montserrat';
    font-size: 24px;
    line-height: 30px;
    display: inline-block;
    vertical-align: middle;
}
.card {
    margin: 20px 0;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
    background-color: #fff;
}
.container.show-border, .element.show-border {
    border: 1px red solid;
    padding: 9px;
}
.content {
    color: #fff;
    background-color: #cccccc;
    padding: 20px;
    font-family: 'Montserrat';
    font-size: calc(1vw + 1em);
}

@media (max-width: 375px) {
.content {
    padding: 5px;
    font-size: 0;
    text-indent: -9999999em;
}
}
.container, .element {
    padding: 10px;
}
.flex {
    display: flex;
    box-sizing: border-box;
}
.row {
    flex-flow: row wrap;
}
.col {
    flex-flow: column wrap;
}
.element {
    min-width: 100px;
}
.content {
    flex: 1 100%;
}
.structure {
    min-height: 480px;
}
.structure-2 {
    flex: 1 44.4444444444%;
}
.f {
    flex: 1 25%;
    min-height: 480px;
}
.g {
    flex: 1 75%;
}
.h {
    flex: 1 75%;
}

@media (max-width : 768px ){
    .structure-2,  .f, .g {
        flex: 1 50%;
        min-height: 480px;
    }
    .h {
        flex: 1 100%;
        min-height: 480px;
    }
}

@media (min-width: 769px ){
    .structure-2{
        flex-direction: column;
        flex-wrap: wrap;
    }
 
    .element{
       flex: 1 1 auto;
       width:50%;
    }

    .f{
        height:100%;
    }
}

<div class="wrap">
  <div class="container card">
    <div class="flex row structure">
      <div class="flex row structure-2">
        <div class="flex element f">
          <div class="content"> F </div>
        </div>
        <div class="flex element g">
          <div class="content"> G </div>
        </div>
        <div class="flex element h">
          <div class="content"> H</div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

当设备宽度小于769px时：

 - class ".f" will take the whole width - 100%

 - classes ".g, .h" will take the half width - 50%





  @media (max-width: 769px) {
   .f {
       flex: 1 100%;
      }
   .g,
   .h {
       flex:0 50%;
      }
  }

Flexbox CSS Divs的安排

2 个答案: