Flex-box small test

by AntowaKartowa

HTML

<div class="container">
  <div class="box box-1">
    <div class="box inner-box box-11">Inner box 11</div>
    <div class="box inner-box box-12">Inner box 12</div>
    <div class="box inner-box box-13">Inner box 13</div>
  </div>
  <div class="box box-2">Box number 2</div>
  <div class="box box-3">Box number 3</div>
  <div class="box box-4">Box number 4</div>
  <div class="box box-5">Box number 5</div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end; /* cols items-valign*/
  justify-content: space-between; /* cols items-align */
  height: 350px;
  width: 100%;
}

.box {
  flex: 0 1 150px;
  text-align: center;
}

.box-1 {
  display: flex;
  flex-flow: column nowrap;
  align-items: center; /* rows items-align */
  justify-content: space-between; /* rows items-valign */
  
  flex: 0 0 150px;
  height: 150px;
}

.inner-box {
  flex: 0 1 20px;
}

.box-11 {
  align-self: flex-end; /* row align */
}

.box-3 {
  align-self: center; /* col valign */
}

.box-1 { background-color: #eee; }
.box-11 { background-color: #2b6; }
.box-12 { background-color: #4c9; }
.box-13 { 
  align-self: stretch; /* row align */
  background-color: #6dc; 
}
.box-2 { background-color: #ddd; }
.box-3 { background-color: #ccc; }
.box-4 { background-color: #bbb; }
.box-5 {
  align-self: stretch; /* col valign */
  background-color: #aaa; 
}