В этом руководстве вы узнаете, как создать привлекательный макет галереи с помощью Flexbox в CSS и HTML. Модель Flexbox предоставляет гибкие возможности для размещения элементов на вашем веб-сайте, особенно для макетов, таких как галереи, где важно элегантное и адаптивное отображение. Мы обсудим структуру HTML-кода и соответствующие стили CSS, пошагово создавая их.
Основные выводы
- В этом руководстве вы узнаете, как использовать Flexbox для создания макета на основе изображений, включая использование контейнерных элементов и применение CSS-свойств, таких как display: flex, position: absolute и justify-content: space-between.
Постепенное руководство
Шаг 1: Создание основной структуры HTML-кода
Начните с создания основной структуры вашего HTML-документа. Создайте контейнерное div с именем main и добавьте еще один div с классом images, содержащий все элементы тегов изображений (IMG). Эти изображения можно получить с веб-сайта с общедоступными изображениями. Обратите внимание, что макет сосредоточен на трех изображениях, чтобы четвертое не отображалось.
Шаг 2: Определение CSS для главного контейнера
Для стилизации основного контейнера установите ширину 100%, чтобы он подгонялся под ширину окна. Установите высоту в 140 пикселей и удостоверьтесь, что позиционирование относительное, чтобы гарантировать, что абсолютные позиции, которые мы будем использовать для изображений и стрелок, правильно выравниваются.
Шаг 3: Стилизация контейнера для изображений
Установите контейнер изображений (.images) на position: absolute, чтобы он "парил" над контейнером для стрелок. Установите ширину и высоту на 100%, чтобы он полностью помещался в основной контейнер. Также используйте свойства Flexbox.
Шаг 4: Применение свойств Flexbox к макету изображений
Для класса .images установите display: flex и выравнивайте содержимое в строке с помощью flex-direction: row. Добавление разрыва от 4 пикселей между изображениями создает больше пространства между ними, разбавляя макет.
Шаг 5: Определение стилей изображений
Изображения (img) в галерее вы должны установить свойство Flexbox flex-basis на ширину 240 пикселей и высоту 140 пикселей. Кроме того, вы можете установить flex-grow и flex-shrink на 0, чтобы изображения не меняли размер и всегда оставались в выбранных размерах.
Шаг 6: Создание контейнера для стрелок
Теперь создайте контейнер для навигационных стрелок. Этот контейнер также должен быть установлен на position: absolute и иметь высоту и ширину 100%, чтобы он всегда находился над изображениями. Используйте display: flex для горизонтального расположения стрелок.
Шаг 7: Стилизация стрелок
Установите свойство justify-content на space-between, чтобы одна стрелка была слева, а другая справа. Для стрелок вы можете использовать символы Unicode для их отображения. Установите цвет текста на белый и убедитесь, что фон стрелок прозрачен.
Шаг 8: Добавление эффектов при наведении
Чтобы добавить эффект при наведении, вы можете изменить цвет фона стрелок, когда наводите на них указатель мыши. Установите его на слегка прозрачный белый, чтобы фон подсветился и создало интерактивное ощущение.
Шаг 9: Проверка и настройка макета
Теперь важно протестировать всю компоновку и, возможно, внести корректировки. Расстояние между изображениями, размер контейнера или общую цветовую схему можно легко изменить в зависимости от требований вашего веб-сайта.
Резюме
В этом учебнике вы узнали, как создать адаптивную галерею изображений с помощью Flexbox. Вы прошли шаги от основной структуры до визуальных эффектов. Flexbox позволяет вам гибко располагать элементы, что делает ваши дизайны особенно привлекательными.
Часто задаваемые вопросы
Как изменить размер изображений?Вы можете настроить значения в flex-basis для изображений.
В чем разница между flex-grow и flex-shrink?flex-grow определяет, может ли элемент увеличиваться, в то время как flex-shrink определяет, может ли и как уменьшаться.
Как настроить эффект при наведении?Измените цвет фона и непрозрачность в вашем CSS для состояния наведения.
