<MyRusakov.ru />

Разработчик игр на Unreal Engine

Разработчик игр на Unreal Engine

Этот комплект с нуля всего за 7 месяцев сделает Вас Unreal-разработчиком. И при этом учиться достаточно 1 час в день.

Начнёте Вы с основ программирования, постепенно перейдя к C++. Затем очень подробно изучите Unreal Engine, и после научитесь программировать на C++ в Unreal Engine. В конце создадите крупный проект на C++ в Unreal Engine для своего портфолио.

Комплект содержит:

- 416 видеоуроков

- 95 часов видео

- 1024 задания для закрепления материала из уроков

- 3 финальных тестирования

- 4 сертификата

- 12 Бонусных курсов

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

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

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Верстка портфолио на flexbox (часть 2)

Верстка портфолио на flexbox (часть 2)

Секция с фотографиями

На секции с портфолио, вы узнаете, как верстать на flexbox. Мы имеем дело с нестандартным расположением фотографий, одна из фотографий в 2 раза больше остальных и занимает двойную высоту. Необходимо создать четыре колонки portfolio_col, в которых будет по два элемента portfolio_item в столбик и только в третьей колонке поместится один элемент portfolio_item с большой фотографией. В каждом portfolio_item имеется фотография portfolio_image.

HTML разметка

<div class="portfolio">
  <div class="portfolio_col">
    <div class="portfolio_item">
      <img class="portfolio_image" src="images/1.jpg" alt="">
    </div>
    <div class="portfolio_item">
      <img class="portfolio_image" src="images/2.jpg" alt="">
    </div>
  </div>
  <div class="portfolio_col">
    <div class="portfolio_item">
    <img class="portfolio_image" src="images/3.jpg" alt="">
    </div>
    <div class="portfolio_item">
      <img class="portfolio_image" src="images/4.jpg" alt="">
  </div>
  </div>
  <div class="portfolio_col">
    <div class="portfolio_item">
      <img class="portfolio_image" src="images/5.jpg" alt="">
  </div>
  </div>
  <div class="portfolio_col">
    <div class="portfolio_item">
      <img class="portfolio_image" src="images/6.jpg" alt="">
    </div>
    <div class="portfolio_item">
      <img class="portfolio_image" src="images/7.jpg" alt="">
    </div>
  </div>
</div>

Как работает верстка на flexbox?

Для блока с классом portfolio включается flex технология, внутри которого четыре элемента ребенка portfolio_col, ведут себя по новым правилам – располагаются в одной строке. Без flexbox, они складывались бы друг под друга.

/* флекс контейнер */
.portfolio {
  display: flex;
}

Каждая колонка занимает одинаковое пространство контейнера.

/* колонка */
.portfolio_col {
  width: 25%;
}
/* ячейка внутри колонки */
.portfolio_item {
  position: relative;
}
/* фото в ячейке */
.portfolio_image {
  display: block;
  max-width: 100%;
  height: auto;
  transition: opacity .2s linear;
}

Адаптивная верстка портфолио на flexbox

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

Разрешим перенос колонок, в контейнере portfolio, зададим свойство wrap. Для колонки portfolio_col пропишем ширину колонки 50%, чтобы в контейнере осталось только две колонки.

Адаптивность на планшетах

@media (max-width: 770px) {
  .section {
    padding: 40px 0;
  }
  .portfolio {
    flex-wrap: wrap;
  }
  .portfolio_col {
    flex: none;
    width: 50%;
  }
}

Адаптивность на смартфонах

Делаем ширину колонки 100%, кроме этого уменьшаем отступы и размер шрифта.

@media (max-width: 575px) {
  .section_header {
    margin-bottom: 50px;
  }
  h3 {
    font-size: 20px;
  }
  h2 {
    font-size: 24px;
  }
  h2:after {
    margin: 20px auto;
  }
  .portfolio_col {
    width: 100%;
  } }

Заключение

На 2019 год, верстка на flexbox, является наиболее удобным и простым способом верстки для новичков. Кроме того, технология на flexbox поддерживается всеми современными браузерами.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.