Нужна помощь. Испытание: кубизм [6/28]

ko3a4ok · 11.Сентябрь.2016 10:22:29

Помогите разобратся. Не могу расположить правильно желтый и пурпурный блоки

.palette div {
min-width: 35px;
min-height: 35px;
}
.palette {
display: flex;
}
.color-olive,
.color-aqua {
width: 50px;
height: 150px;
margin: auto;
}

.color-yellow {
height: 100px;
margin-top: auto;
}
.color-fuchsia {
height: 100px;
margin-bottom: auto;
}

unnamed · 12.Ноябрь.2017 13:39:35

Моё решение немного не верное из-за того что некоторые части не по 5, но думаю основную мысль поймешь

.color-olive {
margin: auto 0 auto 26px;
width: 50px;
height: 150px;

}

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

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

}

.color-aqua {
margin: auto 27px auto 0;
width: 50px;
height: 150px;

}

birukov_jury · 16.Ноябрь.2017 14:10:04

Вот на 100% пройденный, но отсупы не кратны 5. Есть ощущение что автор не этого от меня хотел.

.palette div {
min-width: 35px;
min-height: 35px;
}
.palette{
display: flex;
justify-content: center;
}
.color-olive{
height: 150px;
margin-right: 10px;
width: 50px;
margin-top: 63px;
}

.color-yellow{
height: 100px;
margin-right: 32px;
width: 30px;
margin-top: 170px;
}
.color-fuchsia{
height: 100px;
margin-right: 10px;
width: 30px;
margin-top: 5px;
}

.color-aqua{
height: 150px;
margin-top: 63px;
width: 50px;

}

Ineska · 16.Ноябрь.2017 16:04:19

Вы должны были использовать только автоматические отступы.

Mandy_Rarsh · 02.Апрель.2020 06:11:58

У меня вышло как-то так, но отступы не кратны 5 получились совсем
.palette div {
min-width: 35px;
min-height: 35px;
}
.palette {
display: flex;
flex-direction: row;
}
.palette .color-olive{
align-self: center;
margin-top: 63px;
height: 150px;
margin-left: 31px;
}
.palette .color-yellow {
margin-left: 10px;
margin-top: 170px;
height: 100px;
}
.palette .color-fuchsia {
margin-left: 37px;
height: 100px;
margin-top: 5px;
}
.palette .color-aqua{
height: 150px;
margin-left: 10px;
width: 50px;
margin-top: 63px;
}

ruz457 · 25.Апрель.2020 10:01:34

с авто отступами и кратными 5

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

.palette {
display: flex;
padding: 10px 0;

}

.color-olive {
margin-top: auto;
margin-bottom: auto;
margin-left: auto;
height: 150px;
}

.color-yellow{
margin-top: auto;
margin-left: 10px;
height: 100px;

}

.color-fuchsia{
margin-bottom: auto;
margin-left: auto;
height: 100px;
}

.color-aqua{
margin-top: auto;
margin-bottom: auto;
margin-left: 10px;
margin-right: auto;
height: 150px;
width: 50px;
}

easternleaves · 27.Апрель.2020 23:22:36

Мой вариант.

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

.palette {
  display: flex;
  }

.color-olive {
  margin: auto;
  margin-right: 10px;
  height: 150px;
  }

.color-yellow {
  margin-top: auto;
  margin-right: 5px;
  margin-bottom: 5px;
  height: 100px;
  }  

.color-fuchsia {
  margin-top: 5px;
  margin-bottom: auto;
  margin-left: auto;
  height: 100px;
  }    

.color-aqua {
  margin-top: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: 10px;
  flex-basis: 50px; 
  height: 150px;
  }

redphenix · 04.Май.2020 22:11:19

И мои пять копеек:

    .palette div {
        min-width: 35px;
        min-height: 35px;
        /*margin-bottom: 5px;*/
        /*margin-top: 5px;*/
    }
    .palette {
        display: flex;
        flex-direction: row; /* значение по умолчанию */
        justify-content: flex-start;
        /* align-items: flex-start; */ /* не работает, т.к. в html-коде !important */
        /* default - align-items:stretch  */
    }
    .color-olive {
        /*margin-left: auto;*/
        /* align-self:flex-start; */ /* не работает, т.к. в html-коде !important */
        /*height: 54.5%;*/
        margin-top: 23%;
        margin-bottom: 22.5%;
        margin-right: 5px;
        margin-left: auto;
        /*flex-basis: 50%;*/
    }
    .color-yellow {
        /* align-self:flex-start; */ /* не работает, т.к. в html-коде important */
        height: 36.5%;
        margin-top: auto; /* 170px */
        margin-bottom: 5px;
        margin-right: auto;
        margin-left: 5px;
    }
    .color-fuchsia {
        /* align-self:flex-start; */ /* не работает, т.к. в html-коде important */
        height: 36.5%;
        margin-top: 5px;
        margin-bottom: auto; /* 170px */
        margin-right: 5px;
        margin-left: 5px; /* auto только у одного! */
    }
    .color-aqua {
        /* align-self:flex-start; */ /* не работает, т.к. в html-коде important */
        flex-basis:50px; /* Определяет размер элемента по умолчанию, до распределения оставшегося пространства. default: auto (по контенту) */
        margin-top: 23%;
        margin-bottom: 22.5%;
        margin-right: auto;
        margin-left: 5px;
    }

kirill1975 · 07.Май.2020 07:21:18

при помощи форума и опиливания лобзиком.
100%
в некоторых местах по 5 px margin

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

.palette{
display:flex;

}
.color-olive {
margin-top:auto;
margin-bottom:auto;
margin-left:auto;
margin-right:10px;
height:150px;
}

.color-yellow {
margin-top: auto;

margin-right: 5px;
margin-bottom: 5px;
height: 100px;
}

.color-fuchsia {
margin-top:5px;
margin-bottom:auto;
margin-left:auto;
height: 100px;
}

.color-aqua {
  margin-top:auto;
  margin-bottom: auto;
  margin-left: 10px;
  margin-right: auto;
  height:150px;
  width: 50px;
  }

chipas · 09.Май.2020 16:11:42

Не знаю насколько правильно, но 100%. Надеюсь кому-нибудь поможет)

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

.palette {
display: flex;
}

.color-olive{
height: 150px;
margin: auto;
margin-right: 10px;
}

.color-aqua {
width: 50px;
height: 150px;
margin: auto;
margin-left: 10px;
}

.color-yellow {
height: 100px;
margin-right: 5px;
margin-bottom: 5px;
margin-top: auto;
}

.color-fuchsia {
height: 100px;
margin-left: auto;
margin-top: 5px;
}

Nimble · 31.Май.2020 18:58:50

Очень странно, что у .color-yellow ставится margin-right: 5px, а у .color-fuchsia margin-left: auto. Немного не логично получается.

voxman90 · 26.Июнь.2020 18:17:05

100% без танцев с бубнами (нет необходимости удалять margin: 5px из .palette div {}, чтобы появилась возможность переопределять margin у блоков, достаточно к селекторам блоков добавить .palette и их приоритет в определении CSS-свойств станет выше):

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

.palette {
  display: flex; 
}

.palette .color-olive {
  height: 150px;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
}

.palette .color-yellow {
  height: 100px;
  margin-top: auto;
  margin-right: auto;
}

.palette .color-fuchsia {
  height: 100px;
  margin-bottom: auto;
}

.palette .color-aqua {
  height: 150px;
  flex-basis: 50px;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: auto;
}

Mat · 07.Август.2020 08:40:08

Спустя 40 минут подбора! Это наверное классно! Но какой же смысл в неочевидности очевидного??? 100%

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

.palette {
display: flex;
}

.color-olive {
margin: auto;
margin-right: 10px;
height: 150px;
}

.color-yellow {
margin-top: auto;
margin-bottom: 5px;
margin-right: 5px;
height: 100px;
}

.color-fuchsia {
height: 100px;
margin-top: 5px;
margin-left: auto;
}

.color-aqua {
margin: auto;
margin-left: 10px;
width: 50px;
height: 150px
}