Блог

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

https://codepen.io/manfreebie/pen/NWNvyGz

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

Я попытался сделать так, чтобы контейнер для коктейлей имел значение flex-start вместо center для атрибута justify-content, подобного этому

 #cocktails-container {
  max-width: 70%;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}
  

но это оставляет много пробелов с правой стороны, когда я изменяю его размер. Я попытался немного поиграть со встроенным блоком и вместо этого использовать выравнивание текста, но это тоже не сработало.

Добавьте этот код.

 #cocktails-container::after {
  content: "";
  flex: auto;
}
  

Я делюсь только теми частями, которые я изменил, остальное то же самое.

 #cocktails-container {
  width: 70%; // You can adjust this for your needs
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
}

// Removed margin from .cocktail but added padding to the a tag
.cocktail {
  width: 100%;
  height: auto;
  padding-top: 10px;
  text-align: center;
}
a {
  width: 33%; // You should adjust this for different screen widths, mobile 100% large 25% etc.
  padding: 15px;
  box-sizing: border-box; // This is necessary to include padding in '33% width'
}

  

Пожалуйста, попробуйте этот код, чтобы узнать, как мне правильно центрировать эти элементы?

 .box {
  display: flex;
  align-items: flex-start;
  height: 200px;
}
    .box .selected {
    align-self: center;
}

<div class="box">
  <div class="selected">Three</div>
</div>
  

Я надеюсь, что этот код будет полезен для вас.

Спасибо.

Проблема, которую я определил при проверке кода, заключается в том, что вы используете margin margin: 50px 0px; для .cocktail класса. Измените его на приведенный ниже.

 @media (max-width: 800px) {
  .cocktail {
    width: 60%;
    margin: 50px auto;
  }
}
  

Присвоение значения margin 50px 0px; приведет к нулевому значению левого и правого полей в разрешении samller. Обновите это до 50px auto , что даст автоматическое значение левого и правого полей.