100% 6/28 Как улучшить?

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

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

.palette{
display: flex;
}

.color-olive{
margin: auto 0 auto auto;
flex-basis: 50px;
height: 150px;
}

.color-yellow{
margin: auto 2px 5px 10px;
height: 100px;
}

.color-fuchsia{
margin: 5px 10px auto 30px;
height: 100px;
}

.color-aqua{
margin: auto auto auto 0;
flex-basis: 50px;
height: 150px;
}

2 лайка
2

Блин, смотрю на твой код и зависть берет. т.к у меня код как у дауна получился , громоздкий и бесполезный

1 вариант

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

.palette div:first-child,
.palette div:nth-child(4) {
flex-basis: 50px;
height: 150px;
margin-top: auto;
margin-bottom: auto;
}

.palette div:first-child {
margin-left: auto;
margin-right: 10px;
}

.palette div:nth-child(4) {
margin-right: auto;
margin-left: 10px;
}

.palette div:nth-child(2),
.palette div:nth-child(3) {
height: 100px;
}

.palette div:nth-child(2) {
margin-right: 16px;
margin-top: auto;
margin-bottom: 5px;
}

.palette div:nth-child(3) {
margin-left: 16px;
margin-bottom: auto;
margin-top: 5px;
}

2 вариант

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

.palette .color-olive,
.palette .color-aqua {
margin: auto 10px;
flex-basis: 50px;
height: 150px;
}

.palette .color-yellow,
.palette .color-fuchsia {
height: 100px;
}

.palette .color-fuchsia {
margin-bottom: auto;
margin-left: 16px;
margin-top: 5px;
}
.palette .color-yellow {
margin-top: auto;
margin-right: 16px;
margin-bottom: 5px;
}

3 вариант

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

.palette .color-olive,
.palette .color-aqua {
flex-basis: 50px;
height: 150px;
}

.palette .color-olive { margin: auto 10px auto auto; }
.palette .color-aqua { margin: auto auto auto 10px; }

.palette .color-fuchsia,
.palette .color-yellow {
height: 100px;
}
.palette .color-yellow {
margin: auto 16px 5px 0px;
}
.palette .color-fuchsia {
margin: 5px 0px auto 16px;
}

1 лайк
3

У меня тоже большой код получился и на 97% (если делать все кратно 5). Зашел на форум посмотреть как народ делает. Увидел эту тему с кодом и понял, что думаю и пишу не оптимально. Надо скил набивать))

1 лайк
4

Задать внутренние отступы для контейнера. Тогда все значения будут кратны 5.

.palette {
padding: 10px 15px;
}

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

.palette {
display: flex;
}

.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;
}

2 лайка