Блог

Главная - Вопросы по программированию - Не удается разместить 2 изображения подряд с помощью flex

Не удается разместить 2 изображения подряд с помощью flex

#css #flexbox

Вопрос:

Я не могу разместить в ряд по горизонтали 2 изображения с помощью flex. Я убедился, что в родительском элементе достаточно места. Они просто останутся в колонне.

 .card {
  width: 50%;
  height: 90%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
} 
 <div class="card">
  <img src={htmlLogo} alt="html" width="72px" height="72px">
  <img src={cssLogo} alt="css" width="53px" height="74px">
</div>

Комментарии:

1. Из вашего примера может показаться, что другие стили перезаписывают примененные, поскольку приведенный выше код верен. Проверьте, что применяется с помощью веб-консоли браузеров. Также flex-direction: row является значением по умолчанию и может быть опущено, если не переопределено.

Ответ №1:

Он выравнивается по горизонтали.

 .card{
    width: 50%;
    height: 90%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}  
 <div className="card">
    <img src="https://via.placeholder.com/72" alt="html" width="72px" height="72px"></img>
    <img src="https://via.placeholder.com/53x74.png" alt="css" width="53px" height="74px"></img>
</div>

Ответ №2:

Вы пытаетесь заставить изображения складываться друг на друга?

Если это так, вы можете попробовать flex-direction: column; 

 .card {
  width: 50%;
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
} 
 <div class="card">
  <img src={htmlLogo} alt="html" width="72px" height="72px">
  <img src={cssLogo} alt="css" width="53px" height="74px">
</div>

Ответ №3:

Я понял это, но на самом деле был недоволен именем класса «карта». Я не знаю почему, потому что я больше нигде не использую этот класс. Может быть, создал конфликт с Bootstrap?

В любом случае, спасибо, ребята, за помощь!

Метки: