Блог Дмитрия Полякова

Flexbox определяет набор свойств, для контейнера и его дочерних элементов.

В начале добавляем контейнеру display: flex, например так:

index.html:

  <div class="container">
    <div class="header"></div>
    <div class="main"></div>
    <div class="footer"></div>
  </div>

style.css:

.container {
  display: flex;
}

Полезные функции photoshop, для верстки:

• Скрыть, показать сетку — Просмотр — Вспомогательные элементы
• Посмотреть цвет можно пипеткой
• Размеры удобно смотреть, через инструмент прямоугольная область выделения
• Слои — открывается — окно — слои
• Ну и конечно инструмент выделения, очень полезный

Преобразования

Перемещение

.box {
  width: 300px;
  height: 100px;
  background-color: #f00;
  transform: translate(100px, 100px);
}

transform в данном примере — смещает прямоугольник на 100 px вниз и вправо.