Испытание: кубизм 97% прошу помощи

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

Как не крутил, но применяя margin кратные 5px или auto выше 97% не смог подняться. Прошу помощи в доведении до 100%.

HTML

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: кубизм</title>
        <base href="/assets/course113/">
        <link href="style.css" rel="stylesheet">
        <link href="course.css" rel="stylesheet">
        <link href="exam-1.css" rel="stylesheet">
        <style>
            .palette {
                align-items: stretch !important;
            }

            .palette [class^="color"] {
                align-self: stretch !important;
            }
        </style>
    </head>
    <body class="exam">
        <div class="palette">
            <div class="color-olive"></div>
            <div class="color-yellow"></div>
            <div class="color-fuchsia"></div>
            <div class="color-aqua"></div>
        </div>
    </body>
</html>

CSS

.palette div {
    min-width: 35px;
    min-height: 35px;
}
.palette {
    display: flex;
}
.color-olive {
    width: 50px;
    height: 150px;
    margin: auto;
    margin-right: 10px;
}

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

.color-fuchsia {
    width: 30px;
    height: 100px;
    margin-bottom: auto;
    margin-top: 5px;
    margin-left: 0px;
}

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

Не надо пользоваться числовыми значениями для margin. Здесь только auto. И нужно помнить только одно - с каких сторон задавать автоматические отступы, чтобы расположить элемент по середине поперечной оси, и как задать отступ, чтобы элемент прижался к краю контейнера.

1 лайк
3

без числовых значений для margin вообще?? у меня таким образом все элементы встали по середине

4

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

5

Как? У меня тоже не получается даже не знаю как справиться здесь. Я близок 100% результата или нет?
Попробовал как вы сказали только с помощью auto. но не получается. помогите пожалуйста …
.palette div {
min-width: 35px;
min-height: 35px;
}

.palette {
    display: flex;
    
}
.palette div:first-of-type {
    flex-basis: 50px;
    height: 150px;
    margin: auto;
    margin-right: 10px;
}

.palette div:nth-of-type(2) {
    width: 30px;
    height: 100px; 
    margin-top: auto;
    margin-bottom: 5px;
    
}

.palette div:nth-of-type(3) {
    width: 30px;
    height: 100px;
    margin-top: 5px;
    margin-left: auto;
    margin-bottom: auto;
}

.palette div:nth-of-type(4) {
    flex-basis: 50px;
    height: 150px;
    margin: auto;
    margin-left: 10px;
}
8
Спойлер

.brick-layout {
width: 400px;
padding: 5px;
box-sizing: content-box;
display: flex;
flex-wrap: wrap;
}

.brick {
min-height: 80px;
min-width: 50px;
display: flex;
flex-basis: 100px;
margin: 5px;
}
.brick:nth-child(2),
.brick:nth-child(4),
.brick:nth-child(6),
.brick:nth-child(8) {
flex-grow: 1;
}

9

Вот мое решение

100%

.palette {
display: flex;
}

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

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

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

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

.palette .color-yellow {
margin-top: auto;
margin-right: auto;
}

.palette .color-fuchsia {
margin-bottom: auto;
}

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

1 лайк