FlexAnchors

by Carlos Ledezma

HTML

<body>
  <div class="main-container">
    <div class="row row2 not-anchored">
      <div class="item item12">
        1.1
      </div>
      <div class="item item12">
        1.2
      </div>
      <div class="item item12">
        1.3
      </div>
    </div>
    <div class="row anchored">
      <div class="item anchored">
        A.1
      </div>
    </div>
    <div class="row row1 not-anchored">
      <div class="item item21">
        2.1
      </div>
      <div class="item item21">
        2.2
      </div>
    </div>
    <div class="row anchored">
      <div class="item anchored">
        A.2
      </div>
    </div>
  </div>
</body>

CSS

.main-container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  height: 100vh;
}

.row {
  flex: 1 1 auto;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  width: 100%;
}

.row2 {
  height: 200px;
  min-height: 200px;
}

.row1 {
  height: 100px;
  min-height: 100px;
}

.not-anchored {
  height: 100px;
}

.anchored {
  height: 100%;
}

.item12 {
  flex: 1 1 100px;
  height: 200px;
  min-width: 100px;
  background: tomato;
}

.item21 {
  flex: 1 1 200px;
  height: 100px;
  min-width: 100px;
  background: deepskyblue;
}

.item {
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 3em;
  border: 1px dashed black;
  line-height: 100px;
  margin-left: auto;
  margin-right: auto;
}

.item.anchored {
  flex: 1 1 100%;
  height: 100%;
  min-height: 150px;
  background: hotpink;
}