html - Div 的 Flexbox CSS 排列

Question

尝试使用 Flexbox 排列 div，但不确定我想做什么是可能的。

769 像素的期望外观是让 F 列向下扩展到左侧容器的整个高度，G 和 H 向右堆叠在彼此之上(运行代码片段以查看)。

一旦屏幕分辨率低于 768，我当前的外观就是该 View 的预期结果(F 和 G 在同一行，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 之后更改 flex-direction；。像这样:

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

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

    .f{
        height:100%;
    }
}

附言我也将您的 @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>