Css Flexbox e Grid Layout

 

CSS Flexbox e Grid Layout são técnicas de layout em CSS que permitem criar designs responsivos e flexíveis para páginas da web. Flexbox é uma técnica de layout bidimensional que permite controlar o espaço e o alinhamento dos elementos em uma única direção, enquanto o Grid Layout permite posicionar elementos em uma grade de linhas e colunas.

Na aula de CSS Flexbox e Grid Layout, você aprenderá:

• Como usar o Flexbox para criar layouts flexíveis em uma direção
• Como definir e utilizar flex containers e flex items
• Como usar as propriedades flex-direction, justify-content, align-items e align-self
• Como criar layouts de grade com CSS Grid
• Como definir e utilizar grid containers e grid items
• Como usar as propriedades grid-template-rows, grid-template-columns e grid-gap
• Como criar layouts responsivos usando media queries em combinação com Flexbox e Grid Layout

Com essas técnicas, você poderá criar designs mais eficientes e flexíveis para suas páginas da web, com menos código e mais controle sobre o layout e o comportamento dos elementos.

Exemplo de uso do Flexbox:

HTML:

php
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

CSS:

css
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 200px;
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
}

Este exemplo cria uma div contêiner com três divs filhas. O display é definido como flex e a propriedade justify-content é definida como space-between, fazendo com que as três divs filhas fiquem espaçadas igualmente na horizontal, com o espaço entre elas preenchido. A propriedade align-items é definida como center, fazendo com que as divs filhas sejam centralizadas verticalmente.

Exemplo de uso do Grid Layout:

HTML:

php
<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</div>

CSS:

css
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  grid-gap: 10px;
}

.box1 {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  background-color: red;
}

.box2 {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
  background-color: blue;
}

.box3 {
  grid-row: 2 / 3;
  grid-column: 1 / 2;
  background-color: green;
}

.box4 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  background-color: yellow;
}

Este exemplo cria uma div contêiner com quatro divs filhas. O display é definido como grid e a propriedade grid-template-columns é definida como repeat(2, 1fr), fazendo com que a grade tenha duas colunas com largura igual. A propriedade grid-template-rows é definida como repeat(2, 1fr), fazendo com que a grade tenha duas linhas com altura igual. A propriedade grid-gap é definida como 10px, fazendo com que haja um espaço de 10 pixels entre as divs filhas.

Cada div filha é posicionada na grade usando as propriedades grid-row e grid-column. A box1 ocupa a primeira linha e a primeira coluna, a box2 ocupa as duas primeiras linhas e a segunda coluna, a box3 ocupa a segunda linha e a primeira coluna, e a box4 ocupa a segunda linha e a segunda coluna. As cores de fundo das divs filhas são definidas para melhor visualização do resultado final.