How do I make the internal elements of ASIDE remain horizontal?

Question

How do I make the internal elements of the ASIDE remain horizontally on the same line, next to each other without breaking when resizing the browser.

CSS

aside{
  background-color: #222;
  margin-top: 10px;
  margin-left: 10px;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 10px;
  box-sizing: border-box;

}
aside figure{
  float: left;
  margin-bottom: 20px;
  margin-right: 10px;
}

aside figure img{ /* redimensionar imagem */
    max-width: 300px;
    width: 100%;
}

HTML

<aside>


        <figure>
            <a href="#">
            <img src="./imagens/praias.png" width="300" height="400">
            </a>
        </figure>

        <figure>
            <a href="#">
            <img src="./imagens/praias.png" width="300" height="400">
            </a>
        </figure>

        <figure>
            <a href="#">
            <img src="./imagens/praias.png" width="300" height="400">
            </a>
        </figure>

        <figure>
            <a href="#">
            <img src="./imagens/praias.png" width="300" height="400">
            </a>
        </figure>

    </aside>

Answer 1

Change your CSS code by:

aside{
  background-color: #222;
  margin-top: 10px;
  margin-left: 10px;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
}
aside figure{
  width: 25%; /*Para o caso de 4 colunas. Altere conforme a necessidade*/
  margin-bottom: 20px;
  margin-right: 10px;
}

aside figure img{ /* redimensionar imagem */
    max-width: 300px;
    width: 100%;
}