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

Курсы §36. Флексбокс, часть 2
21

.palette {
display: flex;
padding: 10px 18px;
}

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

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

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

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

22

.palette{
display:flex;
justify-content: space-around;
}
.palette div {
min-width: 35px;
min-height: 35px;
}
.palette .color-olive{
height:150px;
margin-top: auto;
margin-bottom:auto;
margin-left:30px;
}
.palette .color-yellow{
height:100px;
margin-top: auto;
margin-right:auto;
margin-left:10px;
}
.palette .color-fuchsia{
height:100px;
margin-bottom: auto;
margin-right:10px;
}
.palette .color-aqua{
height:150px;
width:50px;
margin-top: auto;
margin-bottom:auto;
margin-right:30px;
}

23

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

.palette {
display: flex;
}

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

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

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

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

не знаю, правильно или нет, но вот мой код

24

19/12/2022 - 100%.

.palette div {
  min-width: 35px;
  min-height: 35px;
}
 /*код выше уже написан*/
 
.palette {
 display: flex; 
}
.color-olive {
  margin: auto 5px auto auto;
  height: 150px;  }

.color-yellow {
 height: 100px;
 margin: auto 5px 5px 5px;
}
.color-fuchsia {
 height: 100px; 
 margin: 5px 5px auto auto;
}
.color-aqua {
 height: 150px;
 width: 50px;
 margin: auto auto auto 5px;
 
}
25

Всем привет!
Можете подсказать, пожалуйста, зачем все пишут в начале:

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

И откуда берутся именно эти числа - 35px?

26

Привет!
Подскажите, пожалуйста, почему код работает по-разному в случаях:

  1. Если расстояние между элементами 1-2 и 3-4 считается как сумма их горизонтальных margin-ов (например, margin-right у первого + margin-left у второго) и
  2. Если расстояние между элементами 1-2 и 3-4 определяется одним margin-right, прописанным у элемента идущего первым?

Может, кодом будет нагляднее. Почему получаются разные результаты?

Это для 1.
.color-olive {
margin: auto 5px auto auto;
height: 150px;

}

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

}

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

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

Это для 2.
.color-olive {
height: 150px;
margin: auto 10px auto auto;
}

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

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

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

27

Я тоже не поняла, зачем эти 35 пикселей. Все работает прекрасно без них.

.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 {
width: 50px;
margin: auto auto auto 5px;
height: 150px;
}

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

.palette {
  display: flex;
}

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

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

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

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

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

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

}

30

.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 0 auto auto;
height: 100px;
}

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