🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
⌘
✎
🕑
Главная ось →
Поперечная ось →
Серая область — флекс‑контейнер, «кубики» внутри — флекс‑элементы
Ключевая идея раскладки флексбоксами — введение главной и поперечной осей, по которым и будут раскладываться флекс‑элементы.
Ключевая идея раскладки флексбоксами — введение главной и поперечной осей, по которым и будут раскладываться флекс‑элементы.
⌘
✎
🕑
Главная ось →
Поперечная ось →
Серая область — флекс‑контейнер, «кубики» внутри — флекс‑элементы
flex‑direction: row
flex‑direction: row‑reverse
flex‑direction: column
flex‑direction: column‑reverse
Главная ось
За направление главной оси отвечает flex-direction. Если элементы нужно разложить слева направо, используем flex-direction: row; справа налево — row-reverse. Если сверху вниз, используем flex-direction: column; снизу вверх — column-reverse
Главная ось
За направление главной оси отвечает flex-direction. Если элементы нужно разложить слева направо, используем flex-direction: row; справа налево — row-reverse. Если сверху вниз, используем flex-direction: column; снизу вверх — column-reverse
flex‑direction: row
flex‑direction: column
flex‑direction: row‑reverse
flex‑direction: column‑reverse
justify‑content: flex‑start
justify‑content: center
justify‑content: flex‑end
За выравнивание элементов на главной оси отвечает свойство justify-content. Если элементы нужно прижать к началу оси, используем justify-content: flex-start; если к концу, то justify-content: flex-end; если к центру, то justify-content: center
За выравнивание элементов на главной оси отвечает свойство justify-content. Если элементы нужно прижать к началу оси, используем justify-content: flex-start; если к концу, то justify-content: flex-end; если к центру, то justify-content: center
justify‑content: flex‑start
justify‑content: center
justify‑content: flex‑end
justify‑content: space‑between
justify‑content: space‑around
justify‑content: space‑evenly
Чтобы отжать первый и последний элемент к краям, а оставшееся место поделить, используем justify-content: space-between. Чтобы равномерно поделить место между всеми элементами, используем justify-content: space-around или justify-content: space-evenly
space-around равномерно распределяет элементы по ширине таким образом, чтобы расстояние до краёв блока равнялось половине расстояния между элементами. space-evenly распределяет элементы так, чтобы все расстояния были одинаковы.
Чтобы отжать первый и последний элемент к краям, а оставшееся место поделить, используем justify-content: space-between. Чтобы равномерно поделить место между всеми элементами, используем justify-content: space-around или justify-content: space-evenly
space-around равномерно распределяет элементы по ширине таким образом, чтобы расстояние до краёв блока равнялось половине расстояния между элементами. space-evenly распределяет элементы так, чтобы все расстояния были одинаковы.
justify‑content: space‑between
justify‑content: space‑around
justify‑content: space‑evenly
align‑items: stretch
По умолчанию элементы растягиваются на всю поперечную ось. Это
align‑items: baseline
Если элементы нужно выровнять по базовой, используем
align‑items: flex‑start
Чтобы прижать элементы на поперечной оси к началу, используем
align‑items: center
Чтобы прижать к центру, используем
align‑items: flex‑end
Чтобы прижать к концу, используем
Поперечная ось
Поперечная ось идёт перпендикулярно главной. Соответственно, если главная ось идёт по горизонтали, то поперечная пройдёт по вертикали. И наоборот: если главная ось идёт по вертикали, поперечная пройдёт по горизонтали.
За выравнивание элементов на поперечной оси отвечает свойство align-items
Поперечная ось
Поперечная ось идёт перпендикулярно главной. Соответственно, если главная ось идёт по горизонтали, то поперечная пройдёт по вертикали. И наоборот: если главная ось идёт по вертикали, поперечная пройдёт по горизонтали.
За выравнивание элементов на поперечной оси отвечает свойство align-items
align‑items: stretch
По умолчанию элементы растягиваются на всю поперечную ось. Это
align‑items: baseline
Если элементы нужно выровнять по базовой, используем
align‑items: flex‑start
Чтобы прижать элементы на поперечной оси к началу, используем
align‑items: center
Чтобы прижать к центру, используем
align‑items: flex‑end
Чтобы прижать к концу, используем