Как сделать колонки с CSS flexbox, которые включают изображения?

Question

Я пытаюсь сделать многостолбцовый макет в CSS с помощью flexbox.Для экранов размером 1025px или выше я хочу, чтобы это был макет с тремя столбцами.Между шириной экрана от 720 до 1025 пикселей я хочу, чтобы было только 2 столбца.Я пытался сделать это разными способами, но мне кажется, что я могу создать только 3 столбца, которые мне нужны.Вот код, который я использовал для создания моих 3 столбцов:

.deals {
  text-align: center;
}

.deal {
  flex-basis: 100%;
}

.deal img {
  width: 80%;
  height: 80%;
}

@media (min-width: 720px) {
  /* columns for home page */
  .deals {
    display: flex;
    flex-direction: row;
  }
}

<div class="deals clearfix">

  <div class="deal_1 deal clearfix">
    <h2>Guitars <span class="orange-word">40%</span> off</h2>
    <img alt="electric guitar" src="img/guitar-deal.jpg">
  </div>

  <div class="deal_2 deal clearfix">
    <h2><span class="orange-word">$200</span> Amplifier</h2>
    <img alt="amplifier" src="img/amplifier-deal.jpg">
  </div>

  <div class="deal_3 deal clearfix">
    <h2><span class="orange-word">$100</span> Microphone</h2>
    <img alt="Microphone" src="img/mircophone-set-deal.jpg">
  </div>

</div>

Answer 1

Для маленького экрана установите элементы flex-based на 40%.Это делает общее количество элементов в строке 2. (Подойдет любое число от 33% до 49%).

Для медиазапроса установите их на 30% (подойдет любое число от 33 до 25).

Чтобы переместить последний элемент влево, добавьте 2 пустых элемента

.deals {
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.deal {
  flex-basis: 40%;
  flex-grow: 1;
}

.deal img {
  width: 80%;
  height: 80%;
}

@media (min-width: 1025px) {
  /* adjust to 3 columns */
  .deal {
    flex-basis: 30%;
  }
}

<div class="deals clearfix">

  <div class="deal_1 deal clearfix">
    <h2>Guitars <span class="orange-word">40%</span> off</h2>
    <img alt="electric guitar" src="img/guitar-deal.jpg">
  </div>

  <div class="deal_2 deal clearfix">
    <h2><span class="orange-word">$200</span> Amplifier</h2>
    <img alt="amplifier" src="img/amplifier-deal.jpg">
  </div>

  <div class="deal_3 deal clearfix">
    <h2><span class="orange-word">$100</span> Microphone</h2>
    <img alt="Microphone" src="img/mircophone-set-deal.jpg">
  </div>

  <div class="deal"></div>
  <div class="deal"></div>

</div>

Answer 2

Полагаю, это то, что вы хотите.

.deals {
  text-align: center;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
}

.deal {
  width:100%;
}

.deal img {
  width: 80%;
  height: 80%;
}

@media (min-width: 720px) and (max-width:1025px) {
  .deals {
  grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 720px) {
  /* columns for home page */
  .deals {
    display: grid;
    grid-template-columns:1fr;
  }
}

<div class="deals clearfix">

  <div class="deal_1 deal clearfix">
    <h2>Guitars <span class="orange-word">40%</span> off</h2>
    <img alt="electric guitar" src="img/guitar-deal.jpg">
  </div>

  <div class="deal_2 deal clearfix">
    <h2><span class="orange-word">$200</span> Amplifier</h2>
    <img alt="amplifier" src="img/amplifier-deal.jpg">
  </div>

  <div class="deal_3 deal clearfix">
    <h2><span class="orange-word">$100</span> Microphone</h2>
    <img alt="Microphone" src="img/mircophone-set-deal.jpg">
  </div>

</div>

Answer 3

Если вы ищете макет «столбец», то он кажется подходящим для CSS Grid Layout .

Это важная часть здесь:

display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Чтобы разбить его:

display: grid; Дает нам контейнер сетки

grid-template-columns: Определяет поведение столбцов для нашей сетки

repeat (..., ...); Функция для определения шаблона для столбцов или строкЗдесь для столбцов.Первый аргумент - это количество повторений - фиксированное или автоматическое - и второй аргумент - это значение, которое мы хотим повторить.

(автоподгонка, minmax (200px, 1fr) ) auto-fit оптимизирует количество столбцов до минимальных и максимальных ограничений контейнера.Здесь, используя ее с функцией minmax(), мы определяем минимальную ширину столбца как 200px, в противном случае распределяем доступную ширину равномерно.Поиграйте с этим.

.deals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  text-align: center;
}

.deal img {
  width: 80%;
  height: 80%;
}

<div class="deals">

  <div class="deal">
    <h2>Guitars <span class="orange-word">40%</span> off</h2>
    <img alt="electric guitar" src="img/guitar-deal.jpg">
  </div>

  <div class="deal">
    <h2><span class="orange-word">$200</span> Amplifier</h2>
    <img alt="amplifier" src="img/amplifier-deal.jpg">
  </div>

  <div class="deal">
    <h2><span class="orange-word">$100</span> Microphone</h2>
    <img alt="Microphone" src="img/mircophone-set-deal.jpg">
  </div>

</div>