Flexbox: Как управлять отступами между блоками в конкретном примере?

Question

[Loneattic]

codepen

scss

* {
  box-sizing: border-box;
  color: white;
}

.layout {
  display: flex;  
  flex-flow: row wrap;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  
  &__canvas {
    margin: -15px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex-grow: 1;
  }
  
  &__sidebar {
    display: flex;
    flex-basis: 33.33%;
    padding: 15px;
    max-width: 33.33%;
    background: green;
    height: 700px;
    justify-content: center;
    align-items: center;
  }
  
  &__body {
    display: flex;
    flex-basis: 66.66%;
    padding: 15px;
    max-width: 66.66%;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: flex-start;
    background: red;
  }
}

.top, .bottom {
    display: flex;
    flex-grow: 1;
    margin: -15px;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    
    &_left, &_right {
      max-width: 50%;
      flex-basis: 50%;
      padding: 15px;
    }
    
    &_left {
      background: purple;
    }
    
    &_right {
      background: yellow;
    }
  }

.block {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 100px;
  background: #000;
}

html

<main class="layout">
  <div class="layout__canvas">
    <aside class="layout__sidebar">Sidebar</aside>
    <div class="layout__body">
      <div class="top">
        <div class="top_left"><div class="block">Row1 Block1</div></div>
        <div class="top_right"><div class="block">Row1 Block2</div></div>
      </div>
      <div class="bottom">
        <div class="top_left"><div class="block">Row2 Block3</div></div>
        <div class="top_right"><div class="block">Row2 Block4</div></div>
      </div>
    </div>
  </div>
</main>

Расстояние между первым и вторым рядом (.top и .bottom) никак не хочет меняться и зависит только от высоты сайдбара.
Помогите разобраться.

Comments

[Danny Arty]

а какое расстояние должно быть? когда оно должно меняться?

[Loneattic]

Danny, никакого не должно быть, flex-start же указан.

[Danny Arty]

Loneattic, это-то понятно, просто у меня и отображаются нормально, т.е между ними нет отступов

[Loneattic]

Danny, это я уже просто исправил. проблема была в align-content, о котором я благополучно забыл :)

Answer 1

[kryamk]

Добавить .layout__body align-content: flex-start;

Comments

[Loneattic]

господи, как же у меня из головы выпало это правило...
спасибо