На этом уроке сверстаем секцию с превью-постами типичного блога с максимальным использованием технологии flex. Адаптивная верстка на flex (часть 1). Создание HTML структуры Создадим внешний контейнер container, ограничивающий ширину секции для самых больших дисплеев и самых маленьких. Внутри внешнего контейнера поместим flex-контейнер (гибкий) posts, в котором будут располагаться блоки с отдельными постами. Блок с отдельным постом содержит изображение, дату, ссылку-заголовок на полный пост и фотографию автора поста. Секция содержит 5 постов и первый пост отличается от остальных. Разместим все посты по блокам с классом posts__element. А к первому, особенному блоку добавим класс модификатор posts__element--big. Это нужно для того, чтобы в дальнейшем задавать для него свои стили. <div class="container"> <div class="posts"> <div class="posts__element posts__element--big"> <img src="img/image1.jpg" alt=""> <div class="posts__info"> <p class="posts__date">Ноябрь 28, 2019</p> <h2> <a href="#">Фантастический завтрак для детей</a> </h2> </div> </div> <div class="posts__element"> <img src="img/image2.jpg" alt=""> <div class="posts__info"> <p class="posts__date">Август 24, 2019</p> <h2> <a href="#">Рецепт коктейля из киви и малины</a> </h2> <div class="posts__author"> <a href="#"> <img src="img/author.png" alt=""> </a> </div> </div> </div> <div class="posts__element"> <img src="img/image3.jpg" alt=""> <div class="posts__info"> <p class="posts__date">Сентябрь 18, 2019</p> <h2> <a href="#">Веселые печеньки для детей</a> </h2> <div class="posts__author"> <a href="#"> <img src="img/author.png" alt=""> </a> </div> </div> </div> <div class="posts__element"> <img src="img/image4.jpg" alt=""> <div class="posts__info"> <p class="posts__date">Октябрь 08, 2019</p> <h2> <a href="#">Пышный домик из печенья</a> </h2> <div class="posts__author"> <a href="#"> <img src="img/author.png" alt=""> </a> </div> </div> </div> <div class="posts__element"> <img src="img/image5.jpg" alt=""> <div class="posts__info"> <p class="posts__date">Декабрь 28, 2019</p> <h2> <a href="#">Домашнее мороженое с малиной</a> </h2> <div class="posts__author"> <a href="#"> <img src="img/author.png" alt=""> </a> </div> </div> </div> </div> </div> Блог-посты, ожидаемо вытянулись в одну колонку. Всё готово для написания CSS кода, но об этом поговорим во второй части урока.