Adaptando o layout antigo para o Flex

Nesta aula, vamos alterar o layout construído em outras aulas para utilizar o conhecimento adquirido de flex.

Para isso, será necessário alterar apenas o CSS, removendo os componentes de posicionamento anterior e substituindo pelo flex.

Confira o CSS resultante abaixo, após as mudanças praticadas e explicadas no vídeo.

body{
  font-family: Arial, Helvetica, sans-serif;
}

header {
  background-color: gray;
  color: white;
  padding: 30px;
  text-align: center;
}

section{
  display: flex;
  flex-direction: row;
}

nav{
  flex: 1;
  background-color:#ccc;
  padding: 20px;
  box-sizing: border-box;
}

nav ul {
list-style-type: none;
padding: 20px;
}

article {
  flex: 8;
  background-color:rgb(238, 238, 238);
  box-sizing: border-box;
  padding: 20px;
}

footer {
  background-color:#777;
  color: white;
  padding: 20px;
  text-align: center;
}

footer a{
  color: white;
}