CODEWITHSUNDEEP
csssassflexbox
randomobject123
randomobject123

Reputation: 133

Flexbox Layout SCSS

How do I change my SCSS code so it would look like this: enter image description here

Not like this: enter image description here

PS> I do not care about colors!

Snippet:

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>

Upvotes: 0

Views: 856

Answers (3)

Ibrahim Haouari
Ibrahim Haouari

Reputation: 250

Just add a middle class for B an C class with height 50% for each of them, and flex direction colum for the parent class

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>

Upvotes: 1

dippas
dippas

Reputation: 60573

You can simplify your layout in CSS by using CSS grid, using 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>

Upvotes: 1

Jkarttunen
Jkarttunen

Reputation: 7641

Here you have two layouts: First container divides this to three columns. The middle column is now growing, thank to flex-grow: 1

In the middle column, i've added B and C containers. Then I mafe them render on top of another using 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>

Upvotes: 1

Related Questions