flex frogs

да, мне пришлось раза три проходить чтоб все запомнить)

На практике все хорошо запоминается

Всем привет!
Начал изучение флексов, и вроде бы всё понятно, только не понятно главное: с чего начинать использование флексов?

Чтобы было понятно, мне необходимо разместить калькулятор в центре страницы.

Для этого я создаю первоначальный контейнер и тут становится вопрос, как его разместить в центре страницы?

Я вышел из положения так:

html
{
   height:100%;
}
body {
   width: 99%;
   height:99%;
   display: flex;
   border: 1px solid black;
   justify-content: center;
   align-items: center;
   margin: 0;
}

И дальше погнал верстать калькулятор.

Насколько это правильно и как лучше делать в настоящей практике?

flex frogs

С чего начать использовать флексов? С display:flex; конечно))

display:flex; с к чему? к body?

а если этот родитель, это вся страница?

Почему оставил 99%?

Нужно все оборачивать в отдельные блоки

Хорошо, как тогда выйти из положения, когда мне нужен калькулятор в центре страницы?

Хорошо, как тогда выйти из положения, когда мне нужен калькулятор в центре страницы?

HTML

<div class="calc-wrapper">
   <div class="calc"></div>
</div>

CSS

.calc-wrapper {
   width: 100vw;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center
}