(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
visibility: hidden;
(O elemento está oculto mas ainda ocupa espaço)
visibility: hidden;
(Largura )
width: 100%;