Anotações Tópicos sobre Flex box css

#CSS

Posicionamento elementos com FlexBox

INTRODUÇÃO AO FLEXBOX

Flexbox visas oferecer distribuição de espaço entre itens em uma ionterface e recursos de alinhamento.

ESTRUTURA BÁSICA:

flex-container: tag que envolve os itens com propridades de display flex:

Flex-container

.flex-container{
  display: flex;
}

The flex container properties are:

[flex-direction](<https://www.w3schools.com/css/css3_flexbox_container.asp#flex-direction>)
[justify-content](<https://www.w3schools.com/css/css3_flexbox_container.asp#justify-content>)
[flex-wrap](<https://www.w3schools.com/css/css3_flexbox_container.asp#flex-wrap>) → se aplica para quebra de linha ou não
[flex-flow](<https://www.w3schools.com/css/css3_flexbox_container.asp#flex-flow>)
[align-items](<https://www.w3schools.com/css/css3_flexbox_container.asp#align-items>) →alinhar itens de acordo com eixo do container.
[align-content](<https://www.w3schools.com/css/css3_flexbox_container.asp#align-content>)

Flex-container e flex-item

.flex-container{
  display: flex;
}

.flex-container .flex-item1{
}

Exemplos no HTML e CSS:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  
  <div class="flex_container">

      <div class="flex_item">1</div>
      <div class="flex_item">2</div>
      <div class="flex_item">3</div>
    
  </div>
  
</body>
</html>
*{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

.flex_container{
  background-color: blue;
  display: flex;
  flex-direction: row;
  padding: 20px;
  height: 500px;


}

.flex_container  div{
  background-color: antiquewhite;
  width: 250px;
  height: 250px;
  border: black solid 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

FLEX-DIRECTION

Estabelece o eixo principal do container:

Eixos :

flex-direction:row; → a direção do texto, esquerda p/ direita.
flex-direction: row-reverse → sentido oposto à direção do texto

.flex-container{
  display: flex;
  flex-direction: row;
}
.flex-container{
  display: flex;
  flex-direction: row-reverse;

}

flex-direction: column → ordenação de cima p/ baixo em unica coluna.
flex-direction: column-reverse → ordenação baixo p/ cima em unica coluna.

.flex-container{
  display: flex;
  flex-direction: column;
}
.flex-container{
  display: flex;
  flex-direction: column-reverse;

}

flex-wrap → propriedade que define se os itens devem ou não quebrar a linha, por padrão eles não quebram linhas, isso faz com que os flex items sejam compactados alem do limite do conteúdo. ex: flex-wrap: nowrap (padrão)
flex-wrap: wrap: → realiza quebra de linhas se os items do container utrapassar o tamanho do container.

JUSTIFY-CONTENT

Se encarrega de alinhar os itens dentro do container de acordo com a direção pretendida e tratar da distribuição de espaço entre eles.

flex-start
flex-end
center
space-between
space-around

FLEX-flow

Atalho paras as propriedades flex-direction e flex-wrap.

exemplo:

.item{
  display: flex;
  flex-flow: row nowrap
}

ALIGN ITEMS

Trata do alinnhamento dos flex items com o eixo do container.

Permite o alinhamento central no eixo vertical.

Tipos:

center
stretch → stretch: padrão, e os flex itens cresçam igualmente. faz com que os intes cresçam de acordo com maior item do container
flex-start
flex-end
baseline → alinhamento de acordo com a base da tipografia dos itens

ALIGN CONTENT

é a propriedade responsável por tratar o alinhamento em relação ao eixo vertical do container.

precisamos que:

o container utilize quebra de linhas.

tipos:

center
stretch → default
flex-start
flex-end
center
space-between
space-around

PROPRIEDADES PARA FLEX-ITEMS

Order

manipula a ordem dos posicionamentos de cada item dentro de um container.

por padrão a order:0; em todos os elementos

flex-items propriedades relacionais:

order
flex-grow
flex-basis
flex-shrink
flex
align-self

FLEX-GROW

Define a proporcionalidade de crescimento de itens respeitando o tamanho de seus conteudos internos.

não funciona caso ter justify-contente.

so poder sé numeros seus valores: 0,1,2,3 …

exemplo:

<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>The flex-grow Property</h1>

<p>Make the third flex item grow eight times faster than the other flex items:</p>

<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>

</body>
</html>
.flex-container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}

.flex-container > div {
background-color: DodgerBlue;
color: white;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}

FLEX_BASIS

é a propriedade que estabelece o tamanho inicial do item antes das distribuição de espaço restante dentro dele, usando como base o conteúdo interno disposto.

auto →caso o item não tenha tamanho, este será proporcional ao conteudo do item.
px, %, em → valores exatos definidos.
0 → terá relação com a definição do flex-grow.

FLEX-SHRICK

É a propriedade ques establelece a capacidade de redução ou compressão do tamanho de um item.

Align self

é a propriedade que estabelece o alinhamento de modo individual sobre um determinado item.

valores possiveis:

auto: valor padrão.
flex-start
flex-end
center
stretch: ocupa todo os espaços relativos.

Flex

Atalho paras as propriedades: grow, shrink e basis.

documentação : https://css-tricks.com/snippets/css/a-guide-to-flexbox/