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

mayones · 26.Май.2022 15:08:32

Мой код 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: 1;
align-self: center;
}

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

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

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

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

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

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

ThomasBergersen · 27.Май.2022 03:31:37

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

DmZhuravlev · 16.Декабрь.2022 13:42:50

16/12/2022 - 100%.

.palette-small {
  display: flex;
}
.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 {
 align-self: center; 
 order: -4;
}
.palette-box:nth-child(1) .palette-small .color-5 {
  order: -3;
}
.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; 
}
.palette-box:nth-child(3) .palette-small {
 justify-content: space-between; 
}
.palette-box:nth-child(3) .palette-small .part {
 justify-content: space-between;
 display: flex;
 flex-direction: column;
}
.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;
}

unddka777 · 23.Февраль.2023 13:06:40

Прошла на 100%
Рекомендую тренажер по флексам на жабах, мне он очень помог Flexbox Froggy - A game for learning CSS flexbox

.palette-box .palette-small,
.palette-box .part {
display: flex;
}

/1/

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

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

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

/2/

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

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

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

/3/

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

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

/4/

.palette-box:last-child .palette-small {
justify-content: space-between;
}

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

vdim3dl · 26.Февраль.2023 08:41:14

/******1********/

.palette-small{
  display: flex;  
}

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

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

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

/******2********/

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

.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(2) .palette-small .color-2,
.palette-box:nth-child(2) .palette-small .color-6{
  align-self: flex-end;
}

/******3********/

.part {
  display: flex;
}

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

.palette-box:nth-child(3) .part:last-child {
  margin-left: auto; 
}

.palette-box:nth-child(3) .part .color-3,
.palette-box:nth-child(3) .part .color-6{
  margin-top: auto;  
}

/******4********/

.palette-box:last-child .part:last-child{
  flex-direction: column;  
  margin-left: auto;
}

.palette-box:last-child .color-2 {
  order: 1;  
  margin-top: auto;
}

AmalgamaLlama · 23.Июнь.2023 19:23:17

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

.palette-box .part {
  display: flex;
}

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

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

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

/* palette 2 (top right) */
.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 3 (bottom left) */
.palette-box:nth-child(3) .part {
  flex-direction: column;
  justify-content: space-between;
}

/* palette 4 (bottom right) */
.palette-box:nth-child(4) .part:nth-child(2) {
  flex-direction: column-reverse;
  justify-content: space-between;
}

Travo1ta · 05.Июль.2023 17:36:46

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

neokooky · 04.Сентябрь.2024 08:12:06

да, похоже это наиболее лаконичный вариант, спасибо)
мне задание показалось очень сложным