• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Равномерное выравнивание блоков на HTML + CSS (Выравнивание блоков с помощью css с использованием flex)
Равномерное выравнивание блоков на HTML + CSS
Kosten
Дата: Понедельник, 2019-04-01, 17:19 | Сообщение 1
Администраторы
Сообщений:24298
Награды: 56


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

Создаем равномерное выравнивание блоков по ширине



HTML

Код
<div class="nsectetu-dipisicing conseq">
  <div class="psam sasasaepm">
     <div>
       <img src="http://zornet.ru/ABVUN/Abaavag/icon_features_list.png" alt="ZorNet - портал для вебмастера" />
      <h2>Title</h2>
      <p>Описание</p>
    </div>
    <button>Название</button>
  </div>
  <div class="psam sasasaepm">
    <div>
    <img src="http://zornet.ru/ABVUN/Abaavag/icon_features_list.png" alt="Интересные решения для вебмастера" />
    <h2>TНазвание</h2>
    <p>Описание</p>
      </div>
    <button>Название</button>
  </div>
  <div class="psam sasasaepm">
    <div>
    <img src="http://zornet.ru/ABVUN/Abaavag/icon_features_list.png" alt="Создание и продвижение сайтов" />
    <h2>Title</h2>
    <p>Описание</p>
      </div>
    <button>Название</button>
  </div>

CSS

Код
.nsectetu-dipisicing {
  max-width: 1100px;
  margin: 0 auto;
}
.psam {
    margin: 3px;
    padding: 8px;
    text-align: center;
    background: #bfb6b6;
}
@media(min-width:680px) {
  .nsectetu-dipisicing {
    display: flex;
  }
  .psam {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    flex-basis: 33%;
  }
}


Демонстрация
Прикрепления: 3566987.png(30.4 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Равномерное выравнивание блоков на HTML + CSS (Выравнивание блоков с помощью css с использованием flex)
  • Страница 1 из 1
  • 1
Поиск: