Size: a a a

Front-end developers

2020 January 28

AH

Alexander Ivar Kjell Hovland in Front-end developers
flex frogs
источник

С

Степан in Front-end developers
Почему оставил 99%?
источник

С

Степан in Front-end developers
да, мне пришлось раза три проходить чтоб все запомнить)
источник

D

Dmitry in Front-end developers
Степан
да, мне пришлось раза три проходить чтоб все запомнить)
На практике все хорошо запоминается
источник

С

Степан in Front-end developers
Dmitry
На практике все хорошо запоминается
100%
источник

D

Dmitry in Front-end developers
Алексей
Всем привет!
Начал изучение флексов, и вроде бы всё понятно, только не понятно главное: с чего начинать использование флексов?

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

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

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

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

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

Насколько это правильно и как лучше делать в настоящей практике?
С чего начать использовать флексов? С display:flex; конечно))
источник

А

Алексей in Front-end developers
я ее прошел, но видимо вы меня не поняли)

Как расположить самый первый контейнер в центре, я объявил body как флекс,  и еще понадобилось

html
{
   height:100%;
}

дописать.

То есть, как расположить флекс-элемент в центре контейнера я знаю, но как расположить контейнер, который еще не является флек -элементом сам по себле? вот в чём вопрос
источник

А

Алексей in Front-end developers
Dmitry
С чего начать использовать флексов? С display:flex; конечно))
display:flex; с к чему? к body?
источник

D

Dmitry in Front-end developers
Алексей
display:flex; с к чему? к body?
Нет, к блоку внутри которого хочешь расположить соответствующие блоки
источник

D

Dmitry in Front-end developers
Например есть четыре квадрата и тебе нужно их расположить по центру внутри родительского, так вот этому родителю задаешь флекс
источник

А

Алексей in Front-end developers
а если этот родитель, это вся страница?
источник

НП

Никита Потапенко in Front-end developers
А зачем
источник

НП

Никита Потапенко in Front-end developers
Не нужно боди давать дисплей флекс
источник

D

Dmitry in Front-end developers
Алексей
а если этот родитель, это вся страница?
Нужно все оборачивать в отдельные блоки
источник

А

Алексей in Front-end developers
Степан
Почему оставил 99%?
Видимо из-за рамки, которую я добавил для наглядности появляется горизонтальная прокрутка со 100%
источник

А

Алексей in Front-end developers
Dmitry
Нужно все оборачивать в отдельные блоки
Хорошо, как тогда выйти из положения, когда мне нужен калькулятор в центре страницы?
источник

D

Dmitry in Front-end developers
Алексей
Хорошо, как тогда выйти из положения, когда мне нужен калькулятор в центре страницы?
Оборачиваешь в блок, блок с калькулятором
источник

АХ

Андрей Хайрунин in Front-end developers
Алексей
Хорошо, как тогда выйти из положения, когда мне нужен калькулятор в центре страницы?
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
}
источник

А

Алексей in Front-end developers
Андрей Хайрунин
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
}
Спасибо тебе огромное)
источник

А

Алексей in Front-end developers
Это то, что мне нужно было
источник