主页 / 问题 / 1206157
Accepted
Sergei Tereshkov
Asked:2021-11-18 05:32:43 +0000 UTC2021-11-18 05:32:43 +0000 UTC

在 flexbox 上调整三列布局

  • 772

请帮我弄清楚如何调整标准的三栏布局，主块居中，两侧有两个侧边栏：https ://jsfiddle.net/jkps6ugq/ ，块大小是固定的。

当窗口大小减小时，右侧边栏必须爬到左侧边栏下方，而主边栏保持在原位。其实外观应该是两栏布局，左侧有两块一个下一个，右侧是主要的。

我试图玩弄顺序，轴的方向 - 没有发生任何明智的事情。甚至可以用 flexbox 来做到这一点（没有 JS 和没有绝对定位）？

.main {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  background: #ccc;
  width: 600px;
  height: 400px;
}

.red {
  background: red;
  width: 100px;
  height: 100px;
}

.green {
  background: green;
  width: 300px;
  height: 300px;
}

 .blue {
  background: blue;
  width: 100px;
  height: 100px;
}
<div class="main">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

flexbox

1 个回答

  1. Best Answer

    我不知道如何使用弯曲，这里是网格。

    *,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.main {
  display: grid;
  height: 400px;
  width: 600px;
  grid-template-columns: 100px 300px 100px;
  background: #ccc;
  justify-content: space-around;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 
            "a b c"
            ". b ."
            ". b .";
}

.red {
  grid-area: a;
  background: red;
}

.green {
  grid-area: b;
  background: green;
}

.blue {
  grid-area: c;
  background: blue;
}

@media (max-width: 600px) {
  .main {
    grid-template-areas: 
            "a b ."
            "c b ."
            ". b .";
  }
}
    <div class="main">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

    • 3

相关问题