<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

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

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

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

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

Подписавшись по 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):

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