html-css-classes-posicionamento-flexbox - 09 Lista de exercícios | HTML e CSS: Classes, posicionamento e Flexbox

Respondi cada questão tomando como referência o HTML e o CSS que eu mesmo desenvolvi, garantindo que as soluções apresentadas estejam alinhadas ao meu próprio código.

01 - Ajustando a altura da tela com CSS

body {
  height: 100vh;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  background-color: #fafafa;
}

02 - Controlando o tamanho de elementos com Box Sizing

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  box-sizing: border-box;
}

03 - Criando um layout sem scroll

html:

<body>
  <div class="container">
    <div class="bloco">Bloco 1</div>
    <div class="bloco">Bloco 2</div>
  </div>
</body>

css:

html, body {
  height: 100vh;
  margin: 0;
  background-color: #000;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  gap: 20px;
}

.bloco {
  background-color: #fff;
  padding: 20px;
  width: 200px;
  text-align: center;
}

04 - Flexbox: alinhando textos e imagens

html:

<main class="container">
  <p class="texto">Texto aqui...</p>
  <img class="imagem" src="imagem.jpg" alt="">
</main>

css:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.texto {
  flex: 1;
}

.imagem {
  width: 200px;
  height: auto;
}

05 - Flexbox: Centralização vertical

html:

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

css:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  border: 1px solid #ccc;
}

06 - Flexbox: responsividade e alinhamento

html:

<div class="responsivo-container">
  <div>Conteúdo 1</div>
  <div>Conteúdo 2</div>
  <div>Conteúdo 3</div>
</div>

css:

.responsivo-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.responsivo-container > div {
  flex: 1 1 200px;
  background-color: lightgray;
  padding: 10px;
  text-align: center;
}

@media (max-width: 600px) {
  .responsivo-container {
    flex-direction: column;
  }
}

Resultado na prática:
Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Garanta sua matrícula hoje e ganhe + 2 meses grátis