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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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