Flexbox 布局 SCSS答案

【问题标题】：Flexbox Layout SCSSFlexbox 布局 SCSS
【发布时间】：2021-03-19 00:29:07
【问题描述】：

如何更改我的 SCSS 代码，使其看起来像这样：

不是这样的：

PS>我不在乎颜色！

片段：

body {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.container {
  display: flex;
  flex: 1;
  justify-content: center;
}

nav {
  flex: -1;
}

.A {
  background-color: red;
  width: 300px;
  height: 700px;
}

main {
  flex: 1;
}

.B {
  background-color: wheat;
  height: 350px;
  width: 300px;
}

.C {
  background-color: lightblue;
  height: 350px;
  width: 300px;
}

.D {
  background-color: green;
  width: 300px;
  height: 700px;
}

p {
  text-align: center;
}

<body>
  <div class="container">
    <div class="A">
      <p>div klasy A</p>
    </div>
    <div class="B">
      <p>div klasy B</p>
    </div>
    <div class="C">
      <p>div klasy C</p>
    </div>
    <div class="D">
      <p>div klasy D</p>
    </div>
  </div>
</body>

【问题讨论】：

标签： css sass flexbox

【解决方案1】：

只需为 B 和 C 类添加一个中间类，每个类的高度为 50%，并为父类添加方向列

body {
    display: flex;
    flex-direction: column;
    margin: 0;
  }
.container {
    display: flex;
    flex: 1;
    justify-content: center;
}
nav {
    flex: -1;
}
.A {
    background-color: red;
    width: 300px;
    height: 700px;
}
main {
    flex: 1;
}
.second-block {
  display: flex;
  flex-direction: column;
    height: 700px;
    width: 300px;

}
 .B {
   height: 50%;
    background-color: wheat;
 }
 .C {
   color: white;
   height: 50%;
    background-color: black;
 }
.D {
    background-color: lightblue;
    height: 700px;
    width: 300px;

}

p {
    text-align: center;
}

 <body>
    <div class="container">
        <div class="A">
            <p>div klasy A</p>
        </div>
        <div class="second-block">
          <div class="B">
              <p>div klasy B</p>
          </div>
          <div class="C">
              <p>div klasy C</p>
          </div>
        </div>
        <div class="D">
            <p>div klasy D</p>
        </div>
    </div>
</body>

【讨论】：

阅读此meta.stackexchange.com/questions/9731/…
已修复，我只是忘记了，抱歉。

【解决方案2】：

这里有两种布局：第一个容器将其分为三列。由于 flex-grow: 1

，中间的列现在正在增长

在中间栏中，我添加了 B 和 C 容器。然后我使用 flex-direction: column;

将它们渲染在另一个之上

body {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.container {
  display: flex;
  flex: 1;
  justify-content: center;
}

nav {
  flex: -1;
}

.middle {
  display: flex;
  flex-direction: column;
  flex-basis: 300px;
  flex-grow: 1
}

.A {
  background-color: red;
  flex-basis: 300px;
  height: 700px;
}

main {
  flex: 1;
}

.B {
  background-color: wheat;
  flex-basis: 350px;
}

.C {
  background-color: lightblue;
  flex-basis: 350px;
}

.D {
  background-color: green;
  flex-basis: 300px;
  height: 700px;
}

p {
  text-align: center;
}

<html>

<body>
  <div class="container">
    <div class="A">
      <p>div klasy A</p>
    </div>
    <div class="middle">

      <div class="B">
        <p>div klasy B</p>
      </div>
      <div class="C">
        <p>div klasy C</p>
      </div>
    </div>
    <div class="D">
      <p>div klasy D</p>
    </div>
  </div>
</body>

</html>

【讨论】：

先保存，再添加cmets
仅供参考，请检查：meta.stackexchange.com/questions/9731/…

【解决方案3】：

您可以使用 CSS 网格简化 CSS 布局，使用 grid-template-areas

body {
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* replaced 300px with 1fr in order to fit the snippet */
  grid-template-areas:
    "a b b d"
    "a c c d";
}

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

.b {
  grid-area: b;
  background-color: wheat
}

.c {
  grid-area: c;
  background-color: lightblue
}

.d {
  grid-area: d;
  background-color: green
}

p {
  text-align: center;
}

<div class="container">
  <div class="a">
    <p>div klasy A</p>
  </div>
  <div class="b">
    <p>div klasy B</p>
  </div>
  <div class="c">
    <p>div klasy C</p>
  </div>
  <div class="d">
    <p>div klasy D</p>
  </div>
</div>

【讨论】：