1

Я хочу сделать так, чтобы 3 колонка ужималась точно также, как и 2, но из-за отсутствия элемента, 3-я колонка не ужимается, как это можно сделать?

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.posts {
  display: flex;
  flex-wrap: wrap;
}
.posts__item {
  box-sizing: border-box;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: calc((100% / 3) - 60px);
  max-width: 413.33px;
  margin-left: 30px;
  margin-top: 50px;
}
.posts__item:first-child {
  flex-basis: calc((100% / 3) * 2 - 50px);
  margin-left: 0;
  max-width: none;
}
.posts__item:nth-child(3n+3) {
  margin-left: 0;
}

.post {
  height: 300px;
}
.post img {
  width: 100%;
  height: 100%;
}
<div class="container">
  <div class="posts">
    <div class="post posts__item"><img src="https://picsum.photos/1000/500" alt=""></div>
    <div class="post posts__item"><img src="https://picsum.photos/750/750" alt=""></div>
    <div class="post posts__item"><img src="https://picsum.photos/250/250" alt=""></div>
    <div class="post posts__item"><img src="https://picsum.photos/250/250" alt=""></div>
    <div class="post posts__item"><img src="https://picsum.photos/250/250" alt=""></div>
    <div class="post posts__item"><img src="https://picsum.photos/500/500" alt=""></div>
    <div class="post posts__item"><img src="https://picsum.photos/500/500" alt=""></div>
  </div>
</div>

Пример, как должно выглядеть, сайт wptavern . com
Если через DevTools удалить элемент, то при сжатии все элементы также ужимаются, но это сделано на гридах

введите сюда описание изображения

2
  • какова цель такой верстки? Вы пробовали изменить размеры экрана? Это же никуда не годится
    – Dmytro
    9 дек 2019 в 8:06
  • @Дмытрык цель - разобраться в работе flexbox, я планирую при маленьком экране перестраивать колонки 9 дек 2019 в 8:08

1 ответ 1

2

.container {
  max-width: 1200px;
  margin: 0 auto;
}

.posts {
  display: flex;
  flex-wrap: wrap;
}
.posts__item {
  box-sizing: border-box;
  flex-grow: 1;
  width: 100%;
  max-width: calc((100% / 3) - 20px);
  margin-bottom: 30px;
}
.posts__item:first-child {
  max-width: calc((100% / 3) * 2 - 10px);
  margin-left: 0 !important;
}
@media only screen and (max-width: 900px) {
  .posts__item {
    max-width: calc(50% - 15px);
  }
  .posts__item:first-child {
    max-width: 100%;
  }
  .posts__item:nth-child(2n+3) {
    margin-left: 30px;
  }
}
@media (min-width: 901px) {
  .posts__item:not(:nth-child(3n+3)) {
    margin-left: 30px;
  }
}

.post {
  height: 300px;
}
.post img {
  width: 100%;
  height: 100%;
}
<div class="container">
  <div class="posts">
    <div class="post posts__item"><img src="https://via.placeholder.com/1000x500" alt=""></div>
    <div class="post posts__item"><img src="https://via.placeholder.com/1000x500" alt=""></div>
    <div class="post posts__item"><img src="https://via.placeholder.com/1000x500" alt=""></div>
    <div class="post posts__item"><img src="https://via.placeholder.com/1000x500" alt=""></div>
    <div class="post posts__item"><img src="https://via.placeholder.com/1000x500" alt=""></div>
    <div class="post posts__item"><img src="https://via.placeholder.com/1000x500" alt=""></div>
    <div class="post posts__item"><img src="https://via.placeholder.com/1000x500" alt=""></div>
  </div>
</div>

4
  • Подскажите, не пойму, почему для всех элементов(я про НЕ медиа запросы) max-width вычитаете 20px, а для первого 10px, не пойму в какой пропорции это связано с отступом слева 9 дек 2019 в 15:44
  • В обычной строке 2 отступа по 30px, нам нужно компенсировать это отняв от ширины каждого блока в строке 20px (60/3)(стили .posts__item). Но, в первой строке 1 отступ, 20px уже отнято у второго блока через стили .posts__item, осталось отнять 10px у первого.
    – E_K
    9 дек 2019 в 16:47
  • Можно разделить на такие части, для лучшего понимания. 1. (100% / 3 - 20px) - ширина блока.| 2. (100% / 3 - 20px) * 2 - ширина 2-х блоков.| 3. (100% / 3 - 20px) * 2 + 30px - ширина 2-х блоков + отступ который он должен перекрывать.
    – E_K
    9 дек 2019 в 16:55
  • Всё, я допёр, жесть до такого додуматься самому 9 дек 2019 в 18:48

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.