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

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

.palette{
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
}

.color-2{
align-self: flex-end;
}

.color-4{
align-self: flex-start;
}

.color-6{
align-self: center;
}

3 лайка
2 
.palette {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: space-between;
    
}

.color-3 {
    width: 100%;
}

.color-4 {
    align-self: flex-start;
}

.color-2 {
    align-self: flex-end;
}
3

Последнее на 100% не проходит,если 96 % поставить, 99% будет, при 100%, результат 98%.

4

.palette {
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
}
.color-2 {
align-self: flex-end;
width: 30px;
}
.color-6 {
align-self: center;
width: 30px;
}
.color-4 {
align-self: flex-start;
width: 30px;
}

5

/* 100% вроде самый простой код*/
.palette {
display:flex;
flex-direction:column-reverse;
justify-content: space-between;
}

.color-4 {
align-self: flex-start;
justify-content: flex-end;
}
.color-6 {
align-self: center;

}
.color-2 {
align-self: flex-end
}

6

Еще меньше)

.palette {
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
}

.color-4 {
align-self: start;
}

.color-6 {
align-self: center;
}

.color-2 {
align-self: flex-end;
}

7 
.palette{
  display: flex;
  justify-content: space-between;
  flex-direction: column-reverse;
}
.color-3{
  align-items:flex-end;
}
.color-4{
  width:10px;
  height:10px;
  border-radius: 50%;
}
.color-6{
  width:10px;
  height:10px;
  border-radius: 50%;
  align-self:center;
}
.color-2{
  width:10px;
  height:10px;
  border-radius: 50%;
  justify-content:flex-end;
  align-self:flex-end;
  
}
8

Вот это вы заморочились)

1 лайк
9

100%
.palette {
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
}
.color-2 {
align-self: flex-end;
}
.color-6 {
align-self: center;
}
.color-4 {
align-self: flex-start;
}