Изображение в виде ссылки, размещенной во флексбоксе

Question

Я пытаюсь получить изображения, которые являются ссылками и разложены с помощью flexbox.

Мои изображения выглядят отлично, когда они не являются ссылками:

HTML:

<div class="flexbox">
        <img class="image1" src="img/image1.png" alt="A cool image">
        <img class="image2" src="img/image2.png" alt="An even cooler image">

CSS:

.flexbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0; 
}

Но когда я делаю ссылки на изображения, я теряю все преимущества моего макета flexbox:

HTML:

<div class="flexbox">
        <a href="sunrise.html">
<img class="image1" src="img/image1.png" alt="A cool image">
</a>
        <a href=”sunset.html”>
<img class="image2" src="img/image2.png" alt="An even cooler image">
</a>
    </div>

Что я делаю не так?

Спасибо!

Answer 1

Я вижу, что код работает в обоих случаях. Вы можете видеть ниже, что у меня есть 2 строки изображения, и в каждой из них гибкий блок работает должным образом.

.flexbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

.separator {
  height: 10px;
  margin: 30px;
  background-color: brown;
}

<div class="flexbox">
  <a href=”sunset.html”><img class="image1" height='150px' src="https://www.w3schools.com/html/pic_trulli.jpg" alt="A cool image">
    <a>
      <a href="/"><img class="image2" height="150px" src="https://www.w3schools.com/html/pic_trulli.jpg" alt="An even cooler image"></a>
</div>

<div class="separator"></div>

<div class="flexbox">
  <img class="image1" src="https://www.w3schools.com/html/pic_trulli.jpg" height="150px" alt="A cool image">
  <img class="image2" src="https://www.w3schools.com/html/pic_trulli.jpg" height="150px" alt="An even cooler image">
</div>