Испытание: кубизм [6/28]

Курсы §36. Флексбокс, часть 2
#1 
 .palette div {
    min-width: 35px;
    min-height: 35px;
}

.palette{
    display: flex;   
}

[class^="color"]{
    margin: 5px;   
}

.color-olive{
    margin-left: auto;
}

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

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

.color-aqua{
    margin-right: auto;   
}

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

100%
Хотелось бы теперь узнать мнение специалистов.

6 симпатий
#2

Всё правильно сделано, правила не нарушены. Замечаний нет.

1 симпатия
#3

Вопрос к эксперту:

Почему у желтого margin-right: auto; , а у фуксии нет свойства margin-left: auto?
Также можно было задать margin-left: auto только фуксии, а margin-right: auto желтому не указывать.

Почему такое поведение, ведь по логике они должны выравняться по центру только если и у желтого и у фуксии маржины влево и вправо соответственно?

#4

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

.palette {
display: flex;
}

.color-olive,
.color-aqua {
width: 50px;
height: 150px;
margin-top: auto;
margin-bottom: auto;
}

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

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

.color-fuchsia {
margin-right: 10px;
margin-left: auto;
margin-top: 5px;
}

.color-olive {
margin-left: auto;
}

.color-aqua {
margin-right: auto;
}

А так?

#5

заполнит все оставшееся свободное пространство. Поэтому для фуксии margin-left: auto уже излишне.

1 симпатия
#6

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

.palette{
display: flex;
}

.color-olive{
margin-top: auto;
margin-bottom: auto;
margin-left: 30px;
height: 150px
}
.color-yellow{
margin-top: auto;
margin-bottom: 5px;
margin-right: auto;
margin-left: 10px;
height: 100px
}
.color-fuchsia
{
height: 100px;
margin-top: 5px;
margin-left: 5px;
}
.color-aqua{
margin-right: auto;
margin-left: 10px;
margin-top: 62px;
height: 150px;
width: 50px;
}

у меня 97% вышло

#7

Можно поинтересоваться, почему общий маргин задается селектору атрибутов именно таким образом [class^=“color”]?
Когда первый раз делал задавал свойство-значение просто контейнеру div, затем этому же контейнеру, но с уточнением селектора атрибутов. Но результат не получался и все фигуры улетали вверх-влево.

#8

из-за специфичности селекторов
иначе бы пришлось подписывать каждому цвету еще и родительский класс. типа:

.palette .color-olive {...}
1 симпатия
#9

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

1 симпатия
#10

Почему flex-basis здесь применён к .color-olive (зелёному столбцу)?

#11

Уточните, что вы имеете ввиду, где он применён? Пришлите скриншот.

#12

Я про эту часть кода:

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

1 симпатия
#13

Спасибо, поняла вас.
Да, вы правы, flex-basis: 50px должно быть только у .color-aqua.

1 симпатия
#14

Всем привет! :japanese_ogre:

Пишу свой вариант кода сюда, потому что эта тема первая в выдаче Google.
Но когда я искал ответ и логику решения данного задания, здесь всего этого я так и не нашёл.

Как мне кажется, моё решение именно такое, какое подразумевали создатели, и через него Вы сможете понять, что конкретно от Вас требуется при прохождении испытания:

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

.palette { 
  display: flex;
}  

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

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

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

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

Надеюсь, кому-нибудь этот пост действительно поможет :face_with_monocle: :face_with_monocle: :face_with_monocle:

11 симпатий
#15

когда ничего не понял и наколхозил. зато 100% :smiley:

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

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

.color-yellow{
  margin: auto 10px 5px 0px;
  height: 100px;
  }
.color-fuchsia{
    margin: 5px 10px auto 27px;
    height: 100px;
  }
.color-aqua{
  width: 50px;
  height: 150px;
  margin: auto 0 auto 0;
  }
#16

В точку, спасибо! Скорректировался под ваш код.
А то у меня отступы получались где-то 31px…

#17

.palette{
display: flex;
}

[class^=“color”]{
margin: 5px;
}

.color-olive{
margin-left: auto;
}

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

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

.color-aqua{
margin-right: auto;
width:50px;
}

.color-olive,
.color-aqua{
height: 150px;
margin-top: auto;
margin-bottom: auto;

}
Вот на 100%

1 симпатия
#18

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

.palette {
display: flex;
}

.color-olive {
margin: 63px 5px 62px 31px;
}

.color-yellow {
margin: 170px 20px 5px 5px
}

.color-fuchsia {
margin: 5px 5px 170px 17px;
}

.color-aqua {
margin: 63px 20px 62px 5px;
width: 50px;
}

#19

Видимо ранее задание отличалось, подправил код под текущее задание.
Правда не совсем понятно для чего к классу color-aqua применять flex-basis, когда он и на width прекрасно реагирует.

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

.palette {
  display: flex;
}

[class^="color"] {
  margin: 5px;
}

.color-olive {
  margin-left: auto;
}

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

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

.color-aqua {
  margin-right: auto;
  flex-basis: 50px;
}

.color-olive,
.color-aqua {
  margin-top: auto;
  margin-bottom: auto;
  height: 150px;
}
#20

Всем привет, вот мой код на 100%

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

.palette {
display: flex;
}

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

}

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

.color-fuchsia {
height: 100px;
margin-top: 5px;
margin-right: 5px;
margin-bottom: auto;
margin-left: 6px; /* 6px вместо 5px */
}

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

:relaxed: :relaxed: :relaxed: