O que é Flexbox na prática [HandsOn]

O que é Flexbox na prática

Vamos entender nessa aula o que é o flexbox usando ele na prática em um projetinho que você pode fazer com que ele depois ganhe mais partes e fique ainda mais bonito.

Passo a passo

Vamos criar uma pasta, que vai ter a nossa pasta de imagens e também o index html e o css
Vamos criar a estrutura html e conectar ela com o css
Agora iremos mudar o título aqui

Default

<title>Home - OneBitShop</title>

1
2

<title>Home - OneBitShop</title>

Agora iremos aqui fazer o header, que será onde teremos a nossa barra de navegação

<header>
      <div>
        <a href="/index.html">
          <img src="./imgs/logoObc.png" alt="logoOBC" class="logo" />
        </a>
      </div>

      <ul class="nav-menu">
        <li><a href="">Início</a></li>
        <li><a href="">Mais vendidos</a></li>
        <li><a href="">Quem somos</a></li>
        <li><a href="">Suporte</a></li>
      </ul>
    </header>

<div>

</a>

</div>

<li><a href="">Início</a></li>

<li><a href="">Mais vendidos</a></li>

<li><a href="">Quem somos</a></li>

<li><a href="">Suporte</a></li>

</ul>

</header>

Vamos agora fazer as primeiras configurações do flexbox e também o seu primeiro uso dentro do css, para você entender melhor sobre box-sizing, recomendo que veja esse artigo da mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

@import url("<https://fonts.googleapis.com/css2?family=Kanit&amp;display=swap>");

* {
  padding: 0;
  margin: 0;

  /* Modifica a maneira de exibir o tamanho de uma caixa, o tamanho total de uma caixa é width + height + border + padding, e o box-sizing modifica isso que facilita na hora do alinhamento, e ter o border-box faz com que ele tenha um alinhamento de acordo com o tamanho disponível (mdn exemplo)*/
  box-sizing: border-box;

  font-family: "Kanit", sans-serif;
}

body {
  width: 100%;
  min-height: 100vh;
  background-color: #212226;
}

@import url("<https://fonts.googleapis.com/css2?family=Kanit&display=swap>");

* {

padding: 0;

margin: 0;

/* Modifica a maneira de exibir o tamanho de uma caixa, o tamanho total de uma caixa é width + height + border + padding, e o box-sizing modifica isso que facilita na hora do alinhamento, e ter o border-box faz com que ele tenha um alinhamento de acordo com o tamanho disponível (mdn exemplo)*/

box-sizing: border-box;

font-family: "Kanit", sans-serif;

}

body {

width: 100%;

min-height: 100vh;

background-color: #212226;

}

Vamos agora configurar o nosso header, ele terá o display flex e também faremos as outras configurações para ele ficar do jeito que deve

header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  padding: 0px 20px;
  background-color: #19191d;
  align-items: center;
}

header {

display: flex;

justify-content: space-between;

width: 100%;

height: 60px;

padding: 0px 20px;

background-color: #19191d;

align-items: center;

}

Vamos agora modificar todo o nosso hedaer

.logo {
  width: 45px;
}

.nav-menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.nav-menu li a {
  text-decoration: none;
  color: white;
  padding: 8px 16px 8px 16px;
  font-size: 18px;
}

.nav-menu li a:hover {
  background-color: #d8d8d82a;
  border-bottom: 1px solid #d8d8d8;
}

.logo {

width: 45px;

}

.nav-menu {

list-style: none;

display: flex;

flex-wrap: wrap;

}

.nav-menu li a {

text-decoration: none;

color: white;

padding: 8px 16px 8px 16px;

font-size: 18px;

}

.nav-menu li a:hover {

background-color: #d8d8d82a;

border-bottom: 1px solid #d8d8d8;

}

Agora nós iremos criar logo após o header um parágrafo para ser o nosso título

Default

<p class="title">Entre na categoria que deseja!</p>

1
2

<p class="title">Entre na categoria que deseja!</p>

Agora nós iremos criar o nosso container, que vai ter nossas imagens e também os nossos textos.

<div class="container">
      <div class="categoria">
        <img src="./imgs/img1.jpg" alt="esportes" class="imgCategoria" />
        <p class="tituloCat">ESPORTES</p>
        <p class="descCat">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat
          quasi qui perferendis eum sint unde quidem sequi voluptatem!
          Asperiores nostrum hic pariatur vero officia nesciunt atque blanditiis
          debitis nam quo!
        </p>
        <a href="<https://google.com>" class="btnLink">
          <div class="btnCat">SAIBA MAIS</div>
        </a>
      </div>

<p class="tituloCat">ESPORTES</p>

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat

quasi qui perferendis eum sint unde quidem sequi voluptatem!

Asperiores nostrum hic pariatur vero officia nesciunt atque blanditiis

debitis nam quo!

</p>

<a href="<https://google.com>" class="btnLink">

<div class="btnCat">SAIBA MAIS</div>

</a>

</div>

Agora, com as nossas categorias criadas, iremos fazer as configurações delas no nosso css

.title {
  color: white;
  font-size: 35px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.imgCategoria {
  width: 440px;
  height: 350px;
}

.tituloCat {
  font-size: 24px;
}

.btnLink {
  color: white;
  text-decoration: none;
}

.btnCat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  background: #ff0044;
}

.btnCat:hover {
  background-color: #ff0044c9;
}

.categoria {
  max-width: 440px;
  color: white;
}

.title {

color: white;

font-size: 35px;

text-align: center;

margin-top: 10px;

margin-bottom: 10px;

}

.container {

max-width: 1200px;

margin: 0 auto;

justify-content: center;

display: flex;

flex-wrap: wrap;

gap: 20px;

}

.imgCategoria {

width: 440px;

height: 350px;

}

.tituloCat {

font-size: 24px;

}

.btnLink {

color: white;

text-decoration: none;

}

.btnCat {

display: flex;

align-items: center;

justify-content: center;

width: 100%;

height: 40px;

background: #ff0044;

}

.btnCat:hover {

background-color: #ff0044c9;

}

.categoria {

max-width: 440px;

color: white;

}

Já estamos com tudo finalizado, basta agora fazermos o nosso footer, que poderia ter mais informações, poderia até mesmo ser um footer parecido com o header, é até um desafio para você, fazer um footer semelhante ao header, só que com mais informações

Default

<footer> <div> <p>Criado por Lucas Queiroga © Onebitcode 2022</p> </div> </footer>

1
2
3
4
5
6

<footer>
      <div>
        <p>Criado por Lucas Queiroga © Onebitcode 2022</p>
      </div>
    </footer>
Estilização deles agora

5 3 votes

Article Rating

fevereiro 16, 2022

1 Comentário

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Lucas G. Pamplona

1 ano atrás

Show de bola!

Responder