(Centraliza, no meio), exemplo se você utilizar o flex-direction: column;, ai você vai centralizar verticalmente, se usar o, flex-direction: row; você irá centralizar horizontalmente, utilizando o comando abaixo, Obs: Só que você tem que ter pelo menos uma linha para fazer o alinhamento

align-items: center;

(Centraliza, no meio), exemplo se você utilizar o flex-direction: column;, ai você vai centralizar verticalmente, se usar o, flex-direction: row; você irá centralizar horizontalmente, utilizando o comando abaixo, Obs: Só que neste caso, pode alinhar mais de uma linha

align-content: center;

(Fazer o alinhamento entre as linhas do elemento)

align-content: space-between;

(Centraliza, no começo, em cima do lado esquerdo.

align-items: flex-start;

(Centraliza, no final em cima, do lado direito).

align-items: flex-start;

(Centraliza, do lado direito, somente um elemento, os demais ficaram, alinhados).

align-items: flex-start;

(animation-name propriedade especifica um nome para a animação @keyframes)

animation-name: animacao;

(Especifique que a animação deve completar um ciclo de 20 segundos)

animation-duration: 20s;

(Propriedade especifica o número de vezes que uma animação deve ser reproduzida, infinite significa infinito, agora se colocar numero, vai fazer quantas vezes foi determinado)

animation-iteration-count: infinite;

(Cor de Fundo)

background-color: #ededed;

(Tirando a cor de fundo, ficando transparent)

background: transparent;

(Borda botton)

border-bottom: 1px solid #eee;

(Cor da borda dos icones)

border-color: rgb(255, 255, 255);

(Deslocamento lateral, Deslocamento vertical, Espalhamento, Cor)

box-shadow: 5 px 5px 10px green;

(Tamanho da caixa, moldura)

box-sizing: border-box;

(Arredondar os lados)

border-radius: 20px

(Borda Lateral)

border-right: 1px solid #ddd;

(Estilo da borda)

border-style: solid;

(Largura da borda)

 border-width: 2px;

(Tamanho da caixa, moldura, o preenchimento e a borda serão incluídos na largura e na altura, ambos div tem o mesmo tamanho agora)

box-sizing: border-box;

(Estilo da borda)

border-style: solid;

(Cor da fonte)

color: white;

(Pode clicar neste item)

cursor: pointer;

(Para que um item, fique do lado do outro)

display: flex;

(Quando a tela tiver menor, menu vai aparecer)

display: block;

(Deixando invisivel, Ocultar)

display: none;

exemplo:

/*Deixando chekbox, invisivel*/
#bt_menu{
display: none; /*Ocultar*/
}

(Itens um abaixo do outro, verticalmente)

flex-direction: column;

(Itens um do lado do outro, horizontalmente)

flex-direction: row;

(Quebra, do elemento, quando passar da tela ele automaticamente, vai para baixo, exemplo que você tem um alinhamento horizontal e não cabe na tela, quanto você faz este comando ele ajusta automaticamente para parte de baixo.

flex-wrap: wrap;

(Pegar o espaço disponivel, quer dizer que este elemento box, ele é flexivel, quer dizer ele vai flexionar sua largura e altura, para sempre caber no container pai)

flex: 1;

ou

flex: 1 1 200px; /*Flex: Espandir, Ficar menor, Base para a foto*/

(Espessura) (Tipo de fonte)

font: normal 15 pt Arial

(Tipo de fonte)

font-family: 'Montserrat', sans-serif;

ou

font-style: italic;

(Tamanho da fonte)

font-size: 12pt;

(Espessura da fonte)

font-weight: normal;

(Flex: Espandir, Ficar menor, Base para a foto)

flex: 1 1 200px;

(Altura)

height: 100%;

(Vai deixar um espaço igual para todos os elementos, só no primeiro em cima e embaixo que não tem espaço)

justify-content: space-between;

(Vai deixar um espaço igual para todos os elementos, só no primeiro em cima vai ter um espaço também igual e embaixo tambem vai ter um espaço igual)

justify-content: space-between;

(Alinhamento)

justify-content: center;

(Sem marcador)

 list-style: none;

(Altura da linha)

line-height: 1.35em;

(Centralizar no meio da tela, a margem)

margin: auto;

ou

margin: 0 auto;

ou

margin: 10px; /*Espaço entre a foto

(Margem superior)

 margin-top: 5px;

(Margem inferior)

margin-bottom: 18px;

(Margem, espaço lateral do botão)

margin: 1em 0;

(Margem esquerda)

margin-left: auto;

(Margem direita)

margin-right: auto;

(Margem superior)

margin-top: 5px;

(Maxima Largura)

max-width: 415px;

Media query, ele serve para deixar seu site responsivo, de acordo com a necessidade do seu projeto. No google crome, quando você clicar com a tecla f12, do lado direito da tela vai aparecer umas opções, você vai clicar na opção aonde parece um quadrado e dentro um formato de celular, quando você clicar a primeira vez, você poderá diminuir e aumentar a tela manualmente e ver o tamanho da tela em pixel, se clicar outra vez, vai aparecer varios tipos de modelos de celular e tablet, para você deixar seu site responsivo, caso não tiver todos os modelos é só clicar em editar, e adicionar outros modelos de celular e tablet. Isto é uma ferramenta do google crome.

Media query, estilizando o CSS, dentro de um arquivo .CSS (Projeto básico do React, após criado o projeto, 1 Opção)

/Dimensões de um Ipad, 768px / 1024px/ Com este exemplo, está configurado um Ipad, quando tiver configurado, você tem que dizer o que vai fazer.

Arquivo App.js

//Importando o react
import React from "react";
import "./App.css";

function App_function_Component() {
  return (
    <div className="App_function_Component">
     <h1>Olá Mundo</h1>
    </div>
  );
}

//Exportando Componente
export default App_function_Component;

Arquivo App.css Neste exemplo, repare que tem a minima largura (min-width: 768px) e maxima largura (max-width: 1024px)

@media (min-width: 768px) and (max-width: 1024px) {
  .App_function_Component {
    background-color: blue; 
  }
  .app_function_component,
  h1 {
    color: white;
  }
}

Mas você poria também determinar, somente a largura máxima, depois que passar do valor da largura máxima, não faça mais nada, abaixo do valor determinado, vai fazer o que você desejar

@media (max-width: 100px) {
  .App_function_Component {
    background-color: blue; 
  }
  .app_function_component,
  h1 {
    color: white;
  }
}

Aqui você pode determinar a largura mínima, como funciona, quando passar acima do valor determinado da largura mínima, vai fazer o que você deseja, abaixo do valor determinado da largura minima não faça nada

@media (min-width: 100px) {
  .App_function_Component {
    background-color: blue; 
  }
  .app_function_component,
  h1 {
    color: white;
  }
}

Se você for usar o media query com styled component, aqui está um exemplo:

Comando para instalar o styled component

yarn add styled-components

Arquivo App.js

import React from "react";
import * as St from "./style";

function App() {
  return (
    <div>
      <St.Title>Hello Word</St.Title>
    </div>
  );
}

export default App;

Arquivo, style.js

import styled  from "styled-components"

export const Title = styled.h1`
  @media (min-width: 768px) and (max-width: 1024px) {
    color: white;
    background-color: blue; 
  }
`;

Agora para você determinar quando o celular está em pé ou deitado: Landscape, celular em pé. Portrait celular deitado.

Arquivo, style.js

import styled  from "styled-components"

export const Geral = styled.div`
  font-family: sans-serif;
  height: 100vh;
  display: flex;
  justify-content: center;
`;

export const Title = styled.h1`
text-align: center;
color: white;

  @media (min-width: 768px) and (max-width: 1024px) {
  @media (orientation: landscape) {
    background-color: orange; 
  }
  @media (orientation: portrait) {
    background-color: blue; 
  }
}
`;

(Altura minima)

min-height: 500px;

se você colocar 100vh, ai vai pegar toda a area disponivel da tela.

min-height: 100vh;

(Largura minima)

min-width: 500px;

(Opacity especifica a trasparencia de um elemento, isto é, o grau no qual o background atrás do elemento é sobreposto)

opacity: 0;

(Totalmente opaco)

opacity: 1;

(Esboço)

outline: none;

(Tirando todo o tipo de animação, apos clicado em cima)

outline: 0;

(Distancia entre os lados, 0, encima e embaixo, 15px distancia entre os dois lados)

padding: 0 15px;

(Descolar o texto da borda)

padding-botton: 20px;

(Distancia entre os lados, horizontal)

padding-horizontal: 20;

(As propriedade position pode assumir 4 valores diferentes: Static, Relative, Absolute e Fixed Utilizando o position relative o elemento passa a aceitar as propriedades Top, Botton, Left e Rigth. Com elas você pode alterar o posicionamento do elemento*/ overflow: visible; /*A propriedade overflow define o comportamento de um elemento quando suas dimensões são excedidas pelo conteúdo Hidden, O Conteudo excedido não ficará visível)

position: relative;

(Com ele você pode posicionar qualquer elemento)

position: absolute;

(Quando clicado, fixar a imagem no meio da tela, independente se rolar para baixo ou para cima)

position: fixed;

(Centralizar no meio da tela, o titulo)

text-align: center;

(Centralizar do lado esquerdo)

text-align: left; 

(Centralizar do lado direito)

text-align: right; 

([none (Sem decoração)], [underline red (sublinhado red)], [underline wavy cor (Sublinhado ondulado cor)] )

text-decoration: none;

(Criar uma linha, riscando o texto)

text-decoration: line-through;

(Tempo, após passado o mouse, vai carregando a cor no tempo)

transition: all 0.35s;

Exemplo: Adicionando efeito ao botão

input[type="button"]:hover,
input[type="button"]:focus {
background-color: #b10b7f; /*Cor apos passado o mouse em cima do botão*/
border-color: #850909; /*Cor da borda após passado em cima do botão*/
transition: all 0.35s; /*Tempo, após passado o mouse, vai carregando a cor no tempo*/

Layout Fixo px - Pixels
Layout Fluido % - Porcentagem auto - Automática vh - Viewport Height vw - Viewport Width
Textos fixos 1px = 0.75pt 16px = 12pt
Texto fluidos em - multiplicado pelo pai rem - multiplicado pelo root

(O elemento está oculto mas ainda ocupa espaço)

visibility: hidden;

(Largura )

width: 100%;