Как расположить картинки в ряд css

Как расположить иконки в ряд с подписями (HTML, CSS)?

Здравствуйте! Я прошу прощения, вопрос наверное очень нубский, но я новичек бьюсь над проблемой, казалось бы простой но все же.
Я хочу понять понять как размещать иконки или картинки строго по середине, в один ряд, и чтоб с подписями. На одном изображении которое я прикрепил примерно то, что мне надо, на втором то, что получается. Спасибо большое всем, кто откликнется!
956a8620ad184a5aae9383f84f3da899.png6c90760860204f27ab97f16d4379d75e.png

  • Вопрос задан более трёх лет назад
  • 7161 просмотр
  • Facebook
  • Вконтакте
  • Twitter

Как насчет модного молодежного flexbox? (ie10+)
https://jsfiddle.net/327ssbs6/2/

Преимущество флекса в том, что он позволяет центрировать как горизонтально, так и вертикально. К тому же, блоки, которые мы хотим выровнять могут быть случайного размера.

CSS3 Animation background-image | Практика CSS / HTML5

Тройная АНИМАЦИЯ на CSS | transform - transition

Разберем пример как вывести изображение через свойство background-image и сделать предварительную анимацию по наведению. Из урока вы узнаете как задействовать background , анимировать псевдо элементы ::before и ::after , и покажу как скрывать элементы контейнера из поля видимости. Затем отобразить их по наведению при помощи transform .

CSS background анимируем изображения по наведению

Для начала подбираем изображения под наши задачи. Далее картинки приведем к одному формату. Делаем ширину 1200, а высоту 800 пик. и каждое изображение сохраняем с этими размерами.

Описываем предварительную разметку HTML

Создаем index файл. При помощи подготовленного сниппета dws! я разворачиваю базовую html разметку страницы. Прописываем заголовок “CSS background анимируем изображения по наведению”. Подключение скрипта удаляю, иконки нам не нужны, файл стиле у нас подключен. Чуть позже мы его создадим, но прежде опишем основной каркас блоков.

Блок с классом .dws-wrapper я оставлю, он служит оберткой при помощи которого выравниваю все элементы по середине экрана.

Внутри этого блока при помощи аббревиатуры эммит делаю следующую разметку:

Создаем секцию классом section.container-images она будет служить оберткой для изображений. Внутри его разместим блок с классом >.img-box*3 в количестве трех штук.

Если кто не знаком с такими комбинациями, смотрите этот урок “Как научиться быстро верстать”, а тут мы на этом не останавливаемся.

Мы с вами создали три блока которые будут являться контейнерами для картинок. Изображения можно вывести двумя способами, при помощи тега img или при помощи стилей через background. Как правило стилями выводим фоновые изображения, незначительные картинки на странице то есть все то что по сути у нас статично и не используется для индексации. Но давайте мы отойдем от этих правил и отобразим изображения в блоках при помощи css свойства background. К тому же ранее я показывал что то аналогичное как выводить тегом img и кто тот урок смотрел, сможет без труда повторить данный эффект.

Пропишем путь к изображениям:

Если у блока нет высоты то фоновые изображения нам не видны и для того чтобы они отображались нужно прописать для .img-box какую нибудь высоту.

Создаем файл style.css в разметке он уже подключен и в нем задаем высоту блока.

Теперь видим появились картинки и далее приступаем к описанию стилей.

Описываем в CSS — Центровку блока

Начну с того что отцентрую основной блок .dws-wrapper посередине экрана. Давайте это выполним при помощи flex-box . Для этого отбираем контейнер и прописываем соответствующий стиль display: flex;.

И что мы видим, картинки то у нас исчезли! А кто скажет почему это произошло?

Все довольно просто, когда мы сделали блок флэкс контейнером то его единственный флэкс элемент схлопнулся по ширине так как в нем ничего не расположено и если туда что то помещаем то видим часть изображений, а значит когда работаем с background для контейнера если он пустой нужно прописать ширину и так же не забывать высоту.

Отбираем флэкс элемент .container-images и задаем для него минимальную ширину в 1200 пик. min-width: 1200px;

Картинки отобразились и далее можно их выравнивать. Определяем высоту окна, затем выравниваем по горизонтали, а далее по вертикали. Вот таким простым способом можем центровать элементы посередине экрана.

CSS — выравнивание картинок в ряд (display: flex)

Следующая задача, нам нужно ровно расположить элементы по горизонтали. Используем тот же Flex-box , для этого прописываем display: flex;.

И только как мы объявили флэкс контейнер видим что элементы пропали. Я думаю все догадались за счет чего это все произошло просто нет у них ширины. И для этого классу .img-box пропишем flex-grow: 1; то есть, дадим им базовую ширину чтобы они выстроились в ряд, а высоту кстати можно перенести в .container-images и увеличим ее до 500 пик. Тут же зададим обводку и не большие отступы в 20 пик.

Теперь возвращаемся к флэкс изображениям к блокам .img-box. Уменьшаем их пропорционально чтобы они влезли в область контейнера background-size: 750px 500px; . Далее с позиционируем картинки посередине background-position: center;. И так как эта background, картинкам пропишем что бы они не множились background-repeat: no-repeat; . Для анимированных переходов сюда пропишем transition: 1s; . Обесцветим блоки при помощи фильтра filter: grayscale(1);

Далее приступим с самой анимации.

CSS — делаем анимацию по наведению

Следующим этапом делаю анимацию. Отбираем элемент по наведению и пропорционально его увеличиваем background-size: 900px 600px; Ширину подбираем так чтобы картинки заполняли полностью область flex-grow: 5; и придадим им цвет filter: grayscale(0); .

Для того чтобы другие картинки не так бросались в глаза то при наведении на элемент сделаем их наполовину прозрачными ну, а у основного элемента установим opacity: 1;

И так первый этап мы закончили у нас получилась такая анимация.

CSS анимация

Теперь сделаем рамку которая по наведению будет эффектно исчезать.

CSS — рамка при помощи ::before и ::after

Рамку будем делать на псевдо элементах ::before и ::after и под них создадим отдельные блоки.

Первым делом пропишем классу .img-box position: relative; для того чтобы мы могли в дальнейшем с позиционировать в нем элементы относительно своих родителей.

Теперь отобразим псевдоэлементы, для этого перечисляем их все и прописываем у них базовые стили.

Затем для каждого элемента делаем свое оформление.

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

Далее при помощи transform придаем движение линиям.

Таким образом достигаем такой анимации.

HTML анимация по наведению

Что нам тут еще не хватает!

Я думаю не помешал бы блок с заголовком и текстовым описанием который будет выплывать снизу вверх.

HTML/CSS — блок с текстовым описанием

Для текста внутри разметки сделаем отдельный контейнер с классом .content. В нем будет находиться заголовок второго уровня и параграф с текстом.

Затем переходим в стили и описываем оформление этих блоков.

Задаем белый цвет, устанавливаем черный фон с небольшой прозрачностью, прописываем шрифт Roboto размером в 14 пик. выравниваем текст по всей ширине и устанавливаем блоку ширину в 50% от контейнера. Далее с позиционируем его в правый нижний угол, зададим внутренний отступ, и установим box-sizing: border-box;.

Оформляем текст в блоке

Далее нужно сделать чтобы этот блок появлялся когда наводим на картинку. Для этого опускаем его за пределы родительского контейнера и установим transition: 0.5s; для плавного появления.

Отображаем его при помощи того же transform только значения устанавливаем в ноль transform: translateY(0); и делаем это с небольшой задержкой.

Для красоты поправим форматирование текста.

И в заключении всего это скрываем блок с контентом когда он в нижнем положении. Для этого прописываем классу .img-box ; и получили такую анимацию.

Дорабатываем текст

В принципе у нас готова уже сцена и в заключении я бы сделал маленькую адаптацию под мобильные устройства, хотя бы под основные разрешения.

CSS — Адаптируем под мобилы

При помощи своего сниппета разворачиваю медиа запросы. Оставим два базовых запроса это 1200, 480 пик. Делаем область браузера под 1200 пик. и как видим блок с картинками не влезает так как у нас выше было задана фиксированная ширина у блока. И нам нужно в первом запросе переопределить ее в проценты.

В остальном тут все нормально и переходим к 480 пик. Делаем область экрана под этот размер и как видим тут сильно ужато, а блоки растянуты по высоте.

Для этого установим контейнеру ширину в 250 пик. Далее пропорционально уменьшаем область блока. Также не забываем область по наведению. Чтобы текстовая область равномерно помещалась.

В принципе, таким простым способом можно создать такого рода анимацию. К тому же вы можете тут самостоятельно экспериментировать, добавлять другие эффекты. Самое главное если вам это интересно, пробуйте, внедряйте, и делитесь в комментариях своими результатами.

Плиточная раскладка на CSS Flexbox с помощью order и :nth-child()

Stas Bagretsov

Эта статья показывает то, как сделать плиточную раскладку на CSS Flexbox, имея под рукой только стандартные возможности CSS и ничего более. Она хороша тем, что показывает подводные камни работы с флексами и даёт понять суть их работы с другого ракурса.

👉Мой Твиттер — там много из мира фронтенда, да и вообще поговорим🖖. Подписывайтесь, будет интересно: ) ✈️

С первого взгляда это кажется дово л ьно простым, взять и создать плиточную раскладку на флексах. Всё, что нужно, это всего лишь выставить flex-flow на column wrap и вуаля, у вас то что нужно. Ну типа того. Проблема с таким подходом в том, что он создает сетку с на вид перетасованным и неясным порядком. Элементы будут отрендерены сверху вниз и люди, смотрящие на сетку слева направо будут читать боксы в примерно таком, довольно произвольном виде, к примеру 1, 3, 6, 2, 4, 7, 8, 5 и так далее и т.п .

У флексов нет простого способа отрендерить элементы в виде колоночной раскладки, используя строчную расстановку элементов, но мы всё же можем сделать плиточную раскладку только на CSS — без JavaScript — используя свойства :nth-child() и order . По сути, это трюк с созданием строчной расстановки элементов, используя flex-direction: column , учитывая то, что мы рендерим 3 колонки:

Это создаст плиточную раскладку с элементами, отрендереными как колонки, но расставленными в порядке, как было бы в строчном порядке. Серые вертикальные линии это псевдоэлементы, которые делают переносы строк.

Давайте разберем проблему (ну или перейдите к её решению в конце статьи или к codepen).

Выбирайте каким будет косяк: смешанным порядком или странными промежутками

Flexbox по факту не создан для построения плиточных раскладок — если вы выставите фиксированную высотку на флекс-контейнере и flex-flow на column wrap , то у вас получится что-то типа такого:

Тут элементы отрендерены по колонкам сверху вниз, создавая произвольный порядок во время чтения слева направо. Конечно же, это ожидаемый итог и желаемый во многих случаях, но не тогда, когда мы пытаемся создать именно плиточную раскладку. Вы только представьте насколько это дезориентирует читателя, когда страница станет больше в высоту.

Если же мы сменим flex-direction на row , имея элементы с различными высотами, то мы получим правильный порядок, но уже со стрёмными и неожиданными разрывами по все нашей сетке:

Так, что, кажется невозможным воспользоваться преимуществами обоих подходов: получить элементы отрендеренные как колонки, но имеющие строчный порядок. Вы могли прибегнуть к flex-direction: column и просто переставить элементы в HTML, достигнув правильного визуального порядка, но это может быть очень громоздко, к тому же это излишне сложно и создаст неразбериху в логическом порядке при переходах по клавише табуляции (Просто кликая по табу).

Меняем порядок элементов с помощью order и nth-child()

Свойство order влияет на порядок элементов в CSS Flexbox или гриде, и мы можем смело использовать его для смены порядка элементов в нашей плиточной раскладке, которая вот вот уже будет сделана как мы хотим. Свойство order довольно простое в использовании: если у вас два элемента и у одного стоит order: 1 , а у другого order: 2 , то элемент с order: 1 будет орендерен перед другим элементом, вне зависимости от их порядка в HTML исходнике.

В нашем случае, решение зависит от тонкостей спецификации order : что случится, если два или более элементов будут с одинаковым order ? Какой из них будет первым? В этом случае, flexbox опирается на исходный код: тот элемент, который идет первым в исходном HTML коде, будет отрендерен перед другим элементом с таким же значением order . Это даёт нам возможность легко перегруппировать элементы в сетке таким образом, что мы сможем сменить порядок расстановки элементов с колоночного на строчный, всё ещё рендеря эти строки, как колонки, используя nth-child() .

Посмотрите на табличку ниже. Чтобы получить рациональный порядок с использованием flex-direction: row , нам просто надо отрендерить элементы в стандартном порядке: 1, 2, 3, 4, 5, 6, и т.д .

Но если нам надо получить тот же порядок с использованием flex-direction: column , то тогда уже нам понадобится поменять сам порядок элементов, таким образом, чтобы он соответствовал порядку каждой колонки в таблице (а не каждой строки):

То есть первыми элементами в нашей флексбокс раскладке должны 1, 4, 7, 10 . Эти элементы заполнят первую колонку, далее 2, 5, 8, 11 для второй колонки и 3, 6, 9, 12 для третьей и последней колонки. Тут нам на помощь приходит селектор nth-child() . Мы можем его использовать для того, чтобы выделить каждый третий элемент (3n) , начиная с первого элемента (3n + 1) и выставить всем этим элементам одинаковое значение order :

Этот селектор выставит order: 1 для элементов 1, 4, 7, 10 , то есть всем первым колонкам. Другими словами, мы используем комбинацию nth-child() и order , чтобы изменить порядок элементов на их изначальном положении. Чтобы создать 2 и 3 колонки, мы изменим порядок у других элементов:

Тут мы делаем три группы элементов: 1, 4, 7, 10 (3n+1) c order: 1 , далее 2, 5, 8, 11 (3n+2) с order: 2 и 3, 6, 9, 12 (3) . Всё вместе выдаёт нам такой порядок элементов 1, 4, 7, 10, 2, 5, 8, 11, 3, 6, 9, 12 .

Такой подход создаст иллюзию того, что элементы вернулись к своему изначальному порядку, как если бы вы рассматривали их в порядке слева направо. Если бы мы визуально оценивали эту сетку по строкам, то первая строка включала бы по первому элементу с каждой группы (1, 2, 3) , вторая строка содержала бы каждый второй элемент из каждой группы (4, 5, 6) и так далее и т.п. Используя эту технику мы можем создать плиточную раскладку с элементами, отрендеренными как колонки, но имеющими порядок как было бы в строчном варианте.

А как это влияет на переходы с использованием табов? Да никак. Свойство order меняет только визуальное представление объектов, а не порядок переходов по клавише TAB, так что в этом плане всё будет работать, как и предполагается.

Предотвращаем слияние колонок

Если у вас довольно много элементов в раскладке, то этот подход 100% приведёт к тому, что что-то пойдет не так. Мы делаем расчёт на то, что каждая “группа”, которую мы создали, будет отрендерена ровно как одна колонка в контейнере, но в реальности у элементов могут быть разные высоты и колонки с лихвой могут сливаться друг с другом. Первая колонка может быть длиннее, чем другие две, для примера, что привело бы к тому, что третья колонка начиналась бы в конце второй:

Подсвеченный элемент (3) должен быть отрендерен в начале третьей колонки или же алгоритм расстановки попросту полетит в тартарары, и если есть место для ещё одного элемента в конце второй колонки, то он само собой будет отрендерен там.

Мы можем пофиксить эту проблему, заставив колонки рестартиться в указанные моменты. Вообще, с флексбоксами нет простого способа для указания “этот элемент должен перейти на новую строку”, но мы можем достигнуть этого эффекта, добавив невидимые элементы, которые возьмут 100% высоты контейнера. Так как они требуют 100% высоты родителя, то они не поместятся в колонку вместе с любым другим элементом, создавая тем самым, переходы на новые строки.

Нам нужно вставить такие переходы в сетку и массив элементов, таким образом, чтобы у нас получилась такая последовательность: 1, 4, 7, 10,<переход>, 2, 5, 8, 11,<переход>, 3, 6, 9, 12 . Мы можем использовать псевдоэлементы на контейнере, чтобы добавить такие переходы и мы можем выставить order на 2 обоим. Добавление псевдоэлемента :before, сделает его первым потомком контейнера, а добавление псевдоэлемента :after сделает его последним потомком того же контейнера, так что если мы выставим order: 2 каждому из них, то они станут первым и последним элементом “группы” с order: 2 (так как они находятся до и после других элементов): :before, 2, 5, 8, 11, :after .

Я подсветил псевдоэлементы ниже, чтобы показать их эффект. Обратите внимание, что элемент 3 мог бы попасть во вторую колонку, но он отображается как первый элемент в последней:

Решение

И в конце вам надо убедиться в том, что ваш флекс-контейнер имеет высоту выше, чем ваша самая высокая колонка (чтобы все колонки поместились). Теперь всё это совместите и так вы сможете сделать настоящую трехколоночную плиточную раскладку (вот codepen).

Ваш html должен выглядеть примерно так, где div это каждый элемент в сетке:

Работаем с более, чем тремя колонками

Чтобы создать плиточную раскладку с более, чем тремя колонками, нам надо сделать несколько вещей: адаптировать наш алгоритм сортировки, обновить ширину элементов и вставить переходы на новые строки вручную (вместо использования псевдоэлементов). Для быстрого доступа к конечным результатам я собрал список codepen’ов показывающих плиточную раскладку на флексах для 3, 4, 5 и 6 колонок.

До этого мы были ограничены созданием только двух псевдоэлементов с :before и :after , теперь нам нужно прибегнуть к ручному добавлению переходов на новые строки внутри контейнера (вам требуется на один элемент-разделитель меньше, чем количество колонок в вашей раскладке). Вы можете просто вставить их в конец контейнера и они будут отсортированы по соответствующим колонкам:

Мы вставляем разделители колонок как span, для того, чтобы отсортировать их в независимости от элементов контента. Нам нужен способ сбросить счет после того, как мы достигнем элемент разделитель или неравномерное число элементов сделает старт первого разделителя после 3 колонки, к примеру. Селектор :nth-of-type выбирает элементы вне зависимости от их типа, так что мы можем разделить порядок элементов и разделители таким образом:

Разделители же, как и в предыдущем примере, возьмут всю высоту контейнера:

В общем, это создаст плиточную колонку с 4-мя колонками (вот codepen):

Вот полное решение для CSS такой плиточной раскладки с 4-мя колонками:

Этот способ создания плиточной раскладки только средствами CSS, точно не является самым надежным, гибким или защищенным от внезапных косяков со стороны разработчика, в отличие от такого же исполнения на JavaScript (например Masonry), но если вы не хотите полагаться на сторонние библиотеки только для того, чтобы создать раскладку, то я надеюсь, что эти советы будут вам полезны.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *