100% Испытание: сложные палитры [31/31]

ko3a4ok · 10.Сентябрь.2016 20:04:51

как-то так получилось
.palette-small {
display: flex;
}
.part {
display: flex;
}
.palette-box:first-child .palette-small {
flex-direction: column;
padding-top: 12px;
}
.palette-box:first-child .color-3,
.palette-box:first-child .color-4 {
width: 10px;
align-self: center;
}
.palette-box:first-child .color-3 {
order: -1;
}
.palette-box:first-child .color-4 {
order: 3;
}
.palette-box:first-child .color-2 {
order: 2;
}

.palette-box:nth-child(2) .palette-small {
flex-direction: column-reverse;
justify-content: space-between;
padding-top:5px;
}
.palette-box:nth-child(2) .palette-small .color-1,
.palette-box:nth-child(2) .palette-small .color-2,
.palette-box:nth-child(2) .palette-small .color-6,
.palette-box:nth-child(2) .palette-small .color-4 {
width: 10px;
}
.palette-box:nth-child(2) .palette-small .color-2,
.palette-box:nth-child(2) .palette-small .color-6 {
align-self: flex-end;
}
.palette-box:nth-child(3) .palette-small .part:first-child {
flex-direction: column;
justify-content: space-between;
}
.palette-box:nth-child(3) .palette-small .part:last-child {
flex-direction: column;
justify-content: space-between;
margin-left: 69px;
}
.palette-box:nth-child(4) .palette-small .part:last-child {
flex-direction: column-reverse;
justify-content: space-between;
margin-left: 41px;
}

rfx350 · 12.Сентябрь.2016 13:24:28

Можно вот так, чтобы без размеров и маргинов:

.palette-small {
display: flex;
}

.palette-box:first-child .palette-small {
flex-direction: column;
justify-content: center;
align-items: center;
}

.palette-box:first-child .color-2 {
order: 3;
align-self: stretch;
}

.palette-box:first-child .color-5 {
order: 2;
align-self: stretch;
}

.palette-box:first-child .color-3 {
order: 1;
}

.palette-box:first-child .color-4 {
order: 4;
}

.palette-box:nth-child(2) .palette-small {
flex-direction: column-reverse;
justify-content: space-between;
align-items: flex-start;
}

.palette-box:nth-child(2) .color-6 {
align-self: flex-end;
}

.palette-box:nth-child(2) .color-2 {
align-self: flex-end;
}

.palette-box:nth-child(3) .palette-small {
flex-direction: row;
justify-content: space-between;
}

.palette-box:nth-child(3) .part {
display:flex;
}

.palette-box:nth-child(3) .part:first-child {
flex-direction: column;
justify-content: space-between;
}

.palette-box:nth-child(3) .part:last-child {
flex-direction: column;
justify-content: space-between;
}

.palette-box:nth-child(4) .palette-small {
flex-direction: row;
justify-content: space-between;
}

.palette-box:nth-child(4) .part {
display:flex;
}

.palette-box:nth-child(4) .part:first-child {
flex-direction: row;
justify-content: flex-start;
}

.palette-box:nth-child(4) .part:last-child {
flex-direction: column-reverse;
justify-content: space-between;
}

MAndr · 14.Октябрь.2016 09:56:05

Вот мой вариант, тоже без размеров и маргинов:

.palette-small {
display: flex;
flex-wrap: wrap;
}

.palette-box:nth-child(1) .palette-small {
flex-direction: column;
justify-content: center;
}

.palette-box:nth-child(1) .palette-small .color-3,
.palette-box:nth-child(1) .palette-small .color-4 {
align-self: center;
}

.palette-box:nth-child(1) .palette-small .color-3 {
order: -1;
}

.palette-box:nth-child(1) .palette-small .color-2 {
order: 1;
}

.palette-box:nth-child(1) .palette-small .color-4 {
order: 2;
}

.palette-box:nth-child(2) .palette-small {
flex-direction: column-reverse;
justify-content: space-between;
align-items: baseline;
}

.palette-box:nth-child(2) .palette-small .color-2,
.palette-box:nth-child(2) .palette-small .color-6 {
align-self: flex-end;
}

.palette-box:nth-child(3) .palette-small {
justify-content: space-between;
}

.palette-box:nth-child(3) .palette-small .part {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.palette-box:nth-child(4) .palette-small {
justify-content: space-between;
}

.palette-box:nth-child(4) .palette-small .part:first-child {
display: flex;
}

.palette-box:nth-child(4) .palette-small .part:last-child {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.palette-box:nth-child(4) .palette-small .part:last-child .color-2 {
order: 1;
}

dPetrovich · 02.Декабрь.2016 13:23:25

.palette-small {
display: flex;
justify-content: space-between;
}

.palette-box:first-child .palette-small {
flex-direction: column-reverse;
justify-content: center;
}

.palette-box:first-child .palette-small .color-3 {
order: 1;
align-self: center;
}

.palette-box:first-child .palette-small .color-4 {
order: -1;
align-self: center;
}

.palette-box:nth-child(2) .palette-small {
flex-direction: column-reverse;
}

.palette-box:nth-child(2) .palette-small .color-2,
.palette-box:nth-child(2) .palette-small .color-6 {
align-self: flex-end;
}

.palette-box:nth-child(2) .palette-small .color-1,
.palette-box:nth-child(2) .palette-small .color-4 {
align-self: flex-start;
}

.palette-box:nth-child(3) .palette-small .part {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.palette-box:nth-child(4) .palette-small .part {
display: flex;
}

.palette-box:nth-child(4) .part:last-child {
flex-direction: column-reverse;
justify-content: space-between;
}

MedVed · 07.Январь.2017 19:07:30

Вот мой вариант на 100%. Минимум кода))

.palette-small {
display: flex;
justify-content: space-between;
}

.palette-box:first-child .palette-small {
flex-direction: column-reverse;
justify-content: center;
}

.palette-box:first-child .color-3 {
order: 2;
align-self: center;
}

.palette-box:first-child .color-4 {
order: -1;
align-self: center;
}

.palette-box:nth-child(2) .palette-small {
flex-direction: column-reverse;
align-items: flex-start;
}

.palette-box:nth-child(2) .color-2,
.palette-box:nth-child(2) .color-6 {
align-self: flex-end;
}

.palette-box:nth-child(3) .part {
display: flex;
flex-direction: column;
justify-content: space-between;
}

.palette-box:nth-child(4) .part {
display: flex;
}

.palette-box:nth-child(4) .part:last-child {
flex-direction: column-reverse;
justify-content: space-between;
}

pazam · 19.Январь.2017 20:47:43

Немного улучшил :

.palette-small,
.part {
display: flex;
justify-content: space-between;
}

.palette-box:nth-child(1) .palette-small {
flex-direction: column-reverse;
justify-content: center;
}

.palette-box:nth-child(1) .color-3 {
order: 1;
align-self: center;
}

.palette-box:nth-child(1) .color-4 {
order: -1;
align-self: center;
}

.palette-box:nth-child(2) .palette-small {
flex-direction: column-reverse;
align-items: flex-end;
}

.palette-box:nth-child(2) .color-1,
.palette-box:nth-child(2) .color-4 {
align-self: flex-start;
}

.palette-box:nth-child(3) .part {
flex-direction: column;
}

.palette-box:nth-child(4) .part:last-child {
flex-direction: column-reverse;
}

Aleksey_Agapov · 12.Февраль.2017 18:27:31

Только так получается(((

.palette-small,
.palette-small .part
{
display:flex;
justify-content:space-between;
}

/1/
.palette-box:first-of-type .palette-small
{
justify-content:center;
flex-direction:column;
}
.palette-box .palette-small .color-3,
.palette-box .palette-small .color-5
{
order:-1;
}
.palette-box:first-of-type .palette-small .color-3,
.palette-box:first-of-type .palette-small .color-4
{
align-self:center;
}

/2/
.palette-box:nth-of-type(2) .palette-small,
.palette-box:nth-of-type(3) .palette-small .part
{
flex-direction:column-reverse;
}

.palette-box:nth-of-type(2) .palette-small .color-1,
.palette-box:nth-of-type(2) .palette-small .color-4
{
align-self:flex-start;
}
.palette-box:nth-of-type(2) .palette-small .color-6,
.palette-box:nth-of-type(2) .palette-small .color-2
{
align-self:flex-end;
}

/3, 4/

.palette-box:nth-of-type(3) .palette-small .part:last-of-type,
.palette-box:nth-of-type(4) .palette-small .part:last-of-type
{
flex-direction:column;
}

Denis-CSS · 20.Февраль.2017 12:11:00

Пока только так смог сжать

.palette-small,
.part{
display:flex;
flex-direction:column;
justify-content:space-between;
}
.palette-box:first-child .palette-small{
justify-content:center;
}
.palette-box:nth-child(1) .color-3,
.palette-box:nth-child(1) .color-4{
align-self:center;
}
.palette-box:nth-child(1) .color-2,
.palette-box:nth-child(4) .color-2,
.palette-box:nth-child(1) .color-4{
order:1;
}
.palette-box:nth-child(2) .palette-small{
flex-direction:column-reverse;
align-items:flex-end;
}
.palette-box .color-1,
.palette-box:nth-child(2) .color-4{
align-self:flex-start;
}
.palette-box:nth-child(3) .palette-small,
.palette-box:nth-child(4) .palette-small,
.palette-box:nth-child(4) .part:first-child{
flex-direction:row;
}

Boris_Voinov · 20.Февраль.2017 17:32:15

вот мой вариант. 91%

.palette-box:nth-child(1) div { /1st box/
/background-color: red;/
display: flex;
flex-direction: column-reverse;
justify-content: space-around;
}

.palette-box:nth-child(1) div .color-2 { /cyan/

.palette-box:nth-child(1) div .color-3 { /green/
align-self: center;
order: 1;
}

.palette-box:nth-child(1) div .color-4 { /yellow/
order: -1;
align-self: center;
}

.palette-box:nth-child(1) div .color-5 { /brown-red/

.palette-box:nth-child(2) div { /2nd box/
/background-color: red;/
display: flex;
flex-direction: column-reverse;
justify-content: space-around;
}

.palette-box:nth-child(2) div .color-2 { /cyan/
align-self: flex-end;
}

.palette-box:nth-child(2) div .color-6 { /purple/
align-self: flex-end;
}

.palette-box:nth-child(2) div .color-4 { /yellow/
align-self: flex-start;
}

.palette-box:nth-child(2) div .color-1 { /black/
align-self: flex-start;
}

.palette-box:nth-child(3) div .part:nth-child(1){ /3nd box part 1/

display: inline-flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
border: 0px solid red;
width: 55px;
height: 120px;

}

.palette-box:nth-child(3) div .part:nth-child(2){ /3nd box part 2/
display: inline-flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
border: 0px solid red;
width: 55px;
height: 120px;
}

.palette-box:nth-child(4) div .part:nth-child(1){ /3nd box part 1/
display: inline-flex;
flex-direction: row;
justify-content: center;
border: 1px solid red;
width: 55px;
height: 120px;
}
/color-7, color-4/

.palette-box:nth-child(4) div .part:nth-child(2){ /3nd box part 2/
display: inline-flex;
flex-direction: column-reverse;
justify-content: space-between;
align-items: flex-end;
border: 1px solid blue;
width: 55px;
height: 120px;
}

vboiko · 28.Март.2017 10:07:41

28 строк кода, 100%
.part,
.palette-small{
display:flex;
justify-content: space-between;
}
.color-3{
align-self:center;
order:1;
}
.palette-box:nth-child(1) .color-4{
align-self:center;
order:-2;
}
.palette-box:nth-child(1) .palette-small{
flex-direction: column-reverse;
justify-content: center;
}
.palette-box:nth-child(2) .palette-small,
.palette-box:nth-child(4) .part:nth-child(2){
flex-direction: column-reverse;
align-items: flex-start;
}
.palette-box:nth-child(2) div:nth-child(-n+2){
align-self: flex-end;
}
.palette-box:nth-child(3) .part {
flex-direction:column;
}

magistr4815 · 18.Март.2018 13:19:40

Сделал вот так:

.palette-box .palette-small {
    display: flex;
}
/* ================= 1 БЛОК ================= */
.palette-box:nth-child(1) .palette-small {
    flex-direction: column;
    justify-content: center;
}
/*желтый*/
.palette-box:nth-child(1) .palette-small .color-4 { 
    align-self: center;
}
/*зеленый*/
.palette-box:nth-child(1) .palette-small .color-3 {
    order: -4;
    align-self: center;
}
/*фиолетовый*/
.palette-box:nth-child(1) .palette-small .color-5 {
    order: -3;
}

/* ================= 2 БЛОК ================= */
.palette-box:nth-child(2) .palette-small {
    flex-direction: column-reverse;
    justify-content: space-between;
    align-items: flex-start;
    
}
/*фиолетовый и бирюзовый*/
.palette-box:nth-child(2) .palette-small .color-6, 
.palette-box:nth-child(2) .palette-small .color-2 {
    align-self: flex-end;
}

/* ================= 3 БЛОК ================= */
.palette-box:nth-child(3) .palette-small {
    justify-content: space-between;
}
.palette-box:nth-child(3) .palette-small .part {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ================= 4 БЛОК ================= */
.palette-box:nth-child(4) .palette-small {
    justify-content: space-between;
}
.palette-box:nth-child(4) .palette-small .part:nth-child(1) {
    display: flex;
}
.palette-box:nth-child(4) .palette-small .part:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
}

Chikago · 29.Март.2018 23:44:06

Получилось вот так. Вопрос возник. Сократить можно как нибудь?
есть возможность объединить вот это(
.palette-box:nth-of-type(1) .palette-small .color-3 {align-self:center;order:-1;}
.palette-box:nth-of-type(1) .palette-small .color-4 {align-self:center;order:2;})?

.palette-small{display:flex;justify-content:space-between;}

.exam .palette-box:nth-of-type(1) .palette-small{flex-direction:column;justify-content:center;}
.palette-box:nth-of-type(1) .palette-small .color-3 {align-self:center;order:-1;}
.palette-box:nth-of-type(1) .palette-small .color-4 {align-self:center;order:2;}
.palette-box:nth-of-type(1) .palette-small .color-2{order:1;}

.palette-box:nth-of-type(2) .palette-small{flex-direction:column-reverse;align-items:flex-end;}
.palette-box:nth-of-type(2) .palette-small .color-1{align-self:flex-start}
.palette-box:nth-of-type(2) .palette-small .color-4{align-self:flex-start}

.palette-box:nth-of-type(3) .palette-small .part{display:flex;justify-content:space-between;flex-direction:column;}

.palette-box:nth-of-type(4) .palette-small .part
{display:flex;flex-direction:row;align-items:stretch;}
.palette-box:nth-of-type(4) .palette-small .part .color-2
{order:1;}
.palette-box:nth-of-type(4) .palette-small .part:nth-of-type(2)
{flex-direction:column;justify-content:space-between;}

LegioN · 01.Апрель.2018 23:11:57

.palette-small {
    display: flex;
    justify-content: space-between;
}

.palette-box:first-child .palette-small {  
    flex-direction: column;
    justify-content: center;
}

.palette-box:first-child .palette-small .color-3 {
    align-self: center;
    order: -2;
}

.palette-box:first-child .palette-small .color-4 {
    align-self: center;
}

.palette-box:first-child .palette-small .color-5 {
    order: -1;
}

.palette-box:nth-child(2) .palette-small {  
    flex-direction: column-reverse;
    align-items: flex-start;
}

.palette-box:nth-child(2) .palette-small .color-2,
.palette-box:nth-child(2) .palette-small .color-6 {
    align-self: flex-end;
}

.palette-box .palette-small .part {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.palette-box:nth-child(4) .palette-small .part:first-child {
    flex-direction: row;
}

.palette-box:nth-child(4) .palette-small .part:last-child {
    flex-direction: column-reverse;
}

Pavel_Tonkovich · 01.Май.2018 22:11:32

А вот мой вариант, сложный, но по правилам. Когда элементы, находящиеся внутри другого элемента, уже перекрученного, приходилось опять крутить, то мозг вырубался и и использовался метод тыка=)

Код

.exam .palette-box:first-of-type .palette-small{
    display: flex;
    justify-content: center;
    flex-direction: column-reverse;
}
.exam .palette-box:first-of-type .color-4 {
    order: -1;
    align-self: center;
}
.exam .palette-box:first-of-type .color-3 {
    order: 1;
    align-self: center;
}
.exam .palette-box:nth-of-type(2) .palette-small{
    display: flex;
    justify-content: space-between;
    flex-direction: column-reverse;
}
.exam .palette-box:nth-of-type(2) .color-2,
.exam .palette-box:nth-of-type(2) .color-6 {
    align-self: flex-end;
}
.exam .palette-box:nth-of-type(2) .color-4,
.exam .palette-box:nth-of-type(2) .color-1 {
    align-self: flex-start;
}
.exam .palette-box:nth-of-type(3) .palette-small {
    display: flex;
    justify-content: space-between;
}
.exam .palette-box:nth-of-type(3) .part {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.exam .palette-box:nth-of-type(3) .color-3,
.exam .palette-box:nth-of-type(3) .color-1{
    align-self: flex-start;
}
.exam .palette-box:nth-of-type(3) .color-4,
.exam .palette-box:nth-of-type(3) .color-6{
    align-self: flex-end;
}
.exam .palette-box:last-of-type .palette-small {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.exam .palette-box:last-of-type .part:nth-child(1) {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}
.exam .palette-box:last-of-type .part:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
}

w1r3d · 24.Май.2018 07:13:38

Зачем столько лишнего ?
.exam + display:flex почти всем элементам прописать

Pavel_Tonkovich · 28.Май.2018 07:03:07

ну да, можно было и сократить…

akinshau · 06.Июнь.2018 12:00:30

Смотрю, все для обращения к последнему .palette-box использовали или :nth-child(n) / :nth-of-type(n), или last-of-type.

А кто-нибудь понял, почему :last-child не срабатывает? div-то вроде последний.

bremxx · 05.Сентябрь.2018 14:25:13

.palette-small {
display: flex;
}

.palette-box:first-child > div {
flex-direction: column;
justify-content: center;
}

.palette-box:first-child .color-3 {
align-self: center;
order: -2;
}

.palette-box:first-child .color-4 {
align-self: center;
order: 1;
}

.palette-box:first-child .color-5 {
order: -1;
}

.palette-box:nth-child(2) > div {
flex-direction: column-reverse;
justify-content: space-between;
}

.palette-box:nth-child(2) .color-1,
.palette-box:nth-child(2) .color-4 {
align-self: flex-start;
}

.palette-box:nth-child(2) .color-6,
.palette-box:nth-child(2) .color-2 {
align-self: flex-end;
}

.part {
display: flex;
}

.palette-box:nth-child(3) > div, 
.palette-box:nth-child(3) .part:first-child,
.palette-box:nth-child(3) .part:last-child,
.palette-box:nth-child(4) > div {
justify-content: space-between;
}

.palette-box:nth-child(3) .part {
flex-direction: column;
}

.palette-box:nth-child(4) .part:last-child {
flex-direction: column-reverse;
justify-content: space-between;
}

Valery_S · 06.Сентябрь.2018 06:58:10

…последний из <div>, но не последний из элементов родителя.
Система в конце добавляет скрипт:

verstalshik · 25.Ноябрь.2018 08:38:22

ээ. я так и думал