6/28 интересное задание.

Курсы §36. Флексбокс, часть 2
1

Очень понравилось задание. Рискну выложить код для критики:

.palette {
  display: flex;
  padding: 10px 15px;
}

.palette div {    
  min-width: 35px;
  min-height: 35px;
}

.color-olive {
  margin: auto 0 auto auto;
  flex-basis: 50px;
  height: 150px;
}
.color-yellow {    
  margin: auto auto 0 10px;
  height: 100px;
}
.color-fuchsia {    
  margin: 0 10px auto auto;
  height: 100px;
}
.color-aqua {
  margin: auto auto auto 0;
  flex-basis: 50px;
  height: 150px;
}

Любые замечания/другие варианты написания приветствуются!

1 лайк
2

Сразу не подумал про паддинги для флекс-контейнера, поэтому подгонял пискелями, в итоги получилось не совсем кратно 5-ти:

.palette div {
    min-width: 35px;
    min-height: 35px;
}
.palette {
    display:flex;
}

.color-olive {
    //margin-left:auto;
    margin-left:26px;
    flex-basis:50px;
    margin-top:auto;
    margin-bottom:auto;
    height:150px;
}
.color-yellow {
    margin-right:auto;
    margin-left:10px;
    margin-top:auto;
    margin-bottom:5px;
    height:100px;
}
.color-fuchsia {
    margin-left:auto;
    margin-right:10px;
    margin-bottom:auto;
    margin-top:5px;
    height:100px;
}
.color-aqua {
    //margin-right:auto;
    margin-right:27px;
    flex-basis:50px;
    margin-top:auto;
    margin-bottom:auto;
    height:150px;
}