是否可以仅使用css和媒体查询创建此多列flexbox布局？

Question

我想知道，是否可以使用css构建这样的布局，并使用媒体查询在两个布局之间切换。

-

| A | B |

| C .... |

-

| A | B |

| A | C |

-

在v1＆＃34; A＆＃34;和＆＃34; B＆＃34;获得50％的宽度和＆＃34; C＆＃34; 100％

在v2＆＃34; B＆＃34;和＆＃34; C＆＃34;获得50％的宽度和＆＃34; A＆＃34;获得＆＃34; A + B＆＃34;

的宽度和高度

也许是这样的......？

<div class="w">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>

.w {
    display: flex;
    flex-flow: row wrap;
}
.a, .b { flex: 0 0 50%; }
.c { flex: 0 0 100%; }

@media (min-width: 500px) {
    .a, .b, .c { flex: 0 0 50% }
    .b { margin-left: 50%; }
}

Answer 1

您可以这样做，在row和column方向之间切换。

在column方向时，wrapper需要wrapper的设定高度。

如果要在column方向上动态设置高度，Flexbox无法单独执行此操作，因此要么需要使用CSS网格，要么添加一个可调整高度的小脚本。

Fiddle demo

Stack snippet

＆＃13;

＆＃13;

body {
  margin: 0;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.wrapper > div {
  flex: 1;
  padding: 20px;
  border: 1px solid red;
  box-sizing: border-box;
}

.wrapper > div:last-child {
  flex-basis: 100%;
}

@media (min-width: 600px) {
  .wrapper {    
    flex-direction: column;
    height: 100vh;
  }  
  .wrapper > div:first-child {
    flex-basis: 100%;
  }
  .wrapper > div:last-child {
    flex-basis: 0;
  }
}

＆＃13;

<div class="wrapper">
  <div>
    A
  </div>
  <div>
    B
  </div>
  <div>
    C
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果A或B / C中的一个可以指定高度，其他应该滚动其内容，您可以这样做，使用绝对定位例如A

Fiddle demo 2

Stack snippet 2

＆＃13;

＆＃13;

body {
  margin: 0;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.wrapper > div {
  flex: 1;
  padding: 20px;
  border: 1px solid red;
  box-sizing: border-box;
}

.wrapper > div:last-child {
  flex-basis: 100%;
}

@media (min-width: 600px) {
  .wrapper {    
    position: relative;
    flex-direction: column;
  }  
  .wrapper > div:last-child {
    flex-basis: 0;
  }
  .wrapper > div:not(:first-child) {
    width: 50%;
    margin-left: 50%;
  }

  .wrapper > div:first-child {
    position: absolute;
    left: 0; top: 0;
    width: 50%; bottom: 0;
    overflow: auto;
  }
}

＆＃13;

<div class="wrapper">
  <div>
    A<br>A<br>A<br>A<br>A<br>A<br>A<br>A
  </div>
  <div>
    B<br>B<br>
  </div>
  <div>
    C
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;