Transcrições
1. Apresentação: Se você é desenvolvedor
e quer levar suas habilidades de desenvolvimento web para o próximo nível,
dominando o CSS flexbox. Então este curso é para você. Olá, sou shuffle, um desenvolvedor
de front-end. Pesos de nossos sete
anos de experiência. Desenvolvedor
e destacando, percebi que
desenvolvedores iniciantes enfrentam dificuldades
em entender os conceitos
do Flexbox. Mas, ao aprender CSS, o
Flexbox é essencial para se tornar um desenvolvedor web lá. Então, criei este curso para ajudar você a entender
tudo sobre CSS Flexbox com
exemplos e projetos práticos. Ao final deste curso, você poderá
usar o CSS flexbox em
seu diário ou em pôsteres para criar diferentes
tipos de layouts. Então, se você estiver pronto para
dominar o CSS Flexbox, nos vemos na aula.
2. Criando uma flexbox: Olá a todos. Neste vídeo, vamos começar a aprender sobre CSS Flexbox. Digamos que temos um
contêiner aqui. E dentro desse contêiner, há vários elementos
HTML. E como você já sabe,
os elementos HTML podem ser principalmente de
dois tipos diferentes. Portanto, o primeiro é
o elemento embutido e o segundo termo é
o elemento de nível de bloco. Portanto, os elementos embutidos serão uma pilha como essa, um
após o outro. Os elementos embutidos ocupam apenas
o espaço de que precisam. Então, eles realmente perguntaram isso em uma única linha, a menos que precisem de mais
espaço do que isso. Mas para os elementos em
nível de bloco, os elementos terão todo o valor horizontal positivo. Então, isso vai levar tudo o que o ISP
existe disponível. Agora vamos aplicar o
Flexbox nesse contêiner. Portanto, aplicar o Flexbox
no contêiner é muito fácil. Vamos apenas
mirar no contêiner e dar a ele uma demonstração de flexibilidade. Agora, chegamos ao Flexbox. Agora, os termos relacionados
ao flexbox não são
realmente definitivos, mas vamos chamar esse contêiner de contêiner
flexível. E os itens são os elementos
do conjunto do contêiner flexível, vamos
chamá-los de itens flexíveis. Então, acho que
será mais interessante e fácil aprender se
fizermos isso no código. Então, vamos
ver isso em código. Então, criei
uma pasta dentro da pasta que está
apenas em index.html. Eu o abri
pelo Visual Studio Code e, usando a extensão Live
Server, também o abri pelo Chrome. Você pode usar qualquer navegador
ou assinar um tratado sobre o uso. Portanto, esse é o esqueleto
HTML simples, nada mais dentro dele. Há a criação de um contêiner. Vou apenas criar um div com a
classe de container. Dentro desta div, vou
colocar várias fitas. Então, vamos nomear esse item, ou vamos dar a eles
o nome da classe do item e outro nome de classe para
cada um deles separadamente. Então, o item 23 é assim. Então, este é o
primeiro item e
vou copiá-lo mais algumas vezes. Vamos fazer com que sejam seis itens. Agora, vamos apenas substituir
o item 234.56. Então esse é o quarto. Ligue-o. E o último é o sistema. Então, temos seis itens em divs
dentro do contêiner div. Agora podemos realmente usar
um arquivo CSS externo. O que eu acho que
vou colocar em uma etiqueta de estilo aqui e codificar. Então, temos seis dB vistos aqui. Então, para tornar
isso mais óbvio podemos ver mais
sobre o flexbox. Vamos estilizá-lo um
pouco para o contêiner. Eu só vou dar a isso uma cor de
fundo para roxo. E também vamos dar a isso
uma borda ao redor. Então, vou dar a ele uma borda de três pixels,
que é sólida. E vamos usar a cor preta. Agora nós temos isso. Então esse é o nosso contêiner. Vou dar a
isso um pouco do raio da borda para que
fique bonito. Então, dez basais. Pronto, terminamos com
o contêiner. Agora vamos selecionar o
item mais o sinal aqui. Portanto, ele terá como alvo todos os divs dentro
do contêiner div. Então, vamos direcionar o item e dar a ele uma
cor de fundo de vermelho. A cor do sabor. Vamos
fazer com que seja a altura da cor. Caso contrário, é pouco visível. Ok? Então, agora vamos dar uma margem, como dez pixels, para que eles
tenham uma boa lacuna entre eles. Além disso, para o sabor, vou
deixá-lo um pouco maior. Então, vamos usar o
tamanho da fonte para talvez 70 peças. É uma massa maior. Agora, novamente, vamos usar um raio de borda
para torná-la bonita. Vamos também adicionar um pouco de preenchimento para que o sabor tenha algumas lacunas. Encontrei isso. Ok, então você tem
seis que eles viram aqui. E a profundidade define os elementos do
nível do bloco lá. Portanto, há atualizações
entre si, em particular, então será necessária toda a melhor
horizontal
que estiver disponível. Ok? Agora vamos transformar
esse contêiner em um flexbox. Então, para fazer isso, vamos dar a
isso uma exibição de flexibilidade. Agora vamos economizar. E agora este é o recipiente de flocos e
esses são os itens flexíveis. Agora vamos falar sobre
a direção flexível.
3. As direções do Flex: Há dois tipos diferentes de propriedades que podemos aplicar
na flexbox CSS para alinhá-las de forma diferente
ou modificá-las. Portanto, o primeiro tipo
de propriedades que
podemos aplicar no recipiente de
flocos, que é o elemento pai. E algumas das propriedades
que podemos aplicar
nos itens flexíveis ou
nos elementos secundários. Então, para entender
isso mais publicamente, vamos falar
sobre as saídas. Então, aqui, como você pode ver, eles vão se alinhar
nessa direção horizontal. Então, ele começa
do lado esquerdo e vai
para a direita. Então, essas são as saídas principais
ou as saídas em flocos. Precisamos entender
isso porque
podemos realmente mudar
os x's aqui. Então, este é o flexor que existe, então o oposto existe é
chamado de eixo cruzado. Então, neste caso, por padrão, o flexor existe, ou seja, vai da esquerda para a direita. Esse é o principal que existe. Em outro mandato. Na verdade, essa é a linha. A coluna será colocada verticalmente em
um capítulo sobre outro. Portanto, essa é a linha e esse
é o eixo flexível padrão. Mas, na verdade, podemos
modificar a reação ou a frase “sexo é” usando
a propriedade de direção flexível. Agora, a propriedade PlayStation
será aplicada no contêiner de
flocos. Então, vamos ver mais sobre isso. A propriedade flex direction tem quatro
tipos diferentes de fole. Essa linha, coluna, linha reversa
e coluna reversa. Portanto, o valor padrão
da direção flexível é linha. Ele vai da esquerda
para a direita e existe
no eixo x ou na
horizontal. Agora, a próxima que
temos aqui é a coluna. Então a coluna, você, eu acho que você já
adivinhou que ela será vertical,
vertical uma na outra. Então, começa
de cima para baixo. Nesse caso, se fizermos a
frase direção para a coluna, agora a principal existe
ou a flexão principal
existe, será o eixo
vertical. O eixo cruzado é
o oposto, que é a horizontal. Portanto, no caso da linha inversa, como os nomes têm apenas
o local principal, as saídas aqui serão
formadas da direita para a esquerda. Então, agora, como você pode ver, o objetivo é que seja verdade
da esquerda para a direita. Então, essa é a linha e a circunferência ou pró-reverso que existe
será o oposto. Então, começa
da direita para a esquerda. E também para os itens, ele vai começar
da direita para a esquerda. Portanto, o primeiro item estará
no canto superior direito, depois o segundo item, depois o terceiro, depois o quarto
item e assim por diante. Para o reverso da coluna, também
é exatamente o mesmo. A coluna será invertida. Então, ele começará de
baixo e vai para o topo. Agora, neste caso,
nas saídas principais, nossos principais flexores vão
de baixo para cima. Então, acho que precisamos
ver essas coisas em código
para que possamos entendê-las perfeitamente. Então esse é o código e
já falamos sobre a
frase “direção j”. Portanto, a
direção de flexão padrão é linha, e essas são as propriedades que vamos aplicar
no contêiner flexível. Com os elementos infantis. falaremos sobre Mais tarde, falaremos sobre
as propriedades dos elementos
secundários. Mas, por enquanto,
falaremos
apenas sobre as propriedades que
vamos aplicar no contêiner da
frase. Então, vamos aplicar a direção
flexível. E, por padrão, é rho. Portanto, se o salvarmos,
ele não
mudará nada porque
esse é o valor padrão. Agora, se fizermos algo
definido como coluna, agora será assim. Então, essa é a coluna. Agora, as saídas principais
aqui são causadas de cima para baixo
e a vertical existe, ou o eixo cruzado começará da
esquerda para a direita. Agora, se divergirmos isso, digamos que vamos
usar a linha inversa. Então, neste caso, o flexor existe ou o principal existe começa
da direita para a esquerda. E os itens começarão do site para o lado esquerdo. Portanto, o primeiro item está
no canto superior direito,
depois 2.345,6. Agora, o reverso da coluna também
é o mesmo. Começará
de baixo para cima. Vamos usar a coluna
invertida para salvar. Agora, o primeiro item
está na parte inferior, depois o segundo item, terceiro, quarto, quinto e sexto. Portanto, nesse caso, a reação
padrão do flexor existente
vai de baixo para cima e o eixo transversal vai
da esquerda para a direita. Então, isso é tudo
sobre o Playstation. Agora vamos falar sobre
o conteúdo justificado.
4. Alinhamento ao longo do eixo flexível: justificar-se com conteúdo: Ok, então o
conteúdo justificado, na verdade, arqueia ao longo do eixo x e é
o principal que existe. Então, se mudarmos a frase sexo, essas são as principais que
existem usando direção de reprodução que
justifica que o conteúdo também mudará
porque justify-content atua
apenas na flexão principal, x
não ao longo do eixo cruzado. Portanto, existem seis valores
diferentes para justificar a pobreza de conteúdo. A primeira é a
estatística de flocos, que é o valor padrão. Isso é o que
já vimos. É o terceiro da esquerda, depois vai até que todos
os itens estejam empilhados. segundo valor do
justify-content é a extremidade
flexível do fluxo e ele vai
empurrar para a extremidade
do contêiner. Mas o alinhamento será
o mesmo éster do primeiro, segundo, terceiro e quarto. Mas estará no
final do recipiente de flocos. Agora, para o centro, ele estará
na posição central
do recipiente de flocos. Agora, o
meio termo é meio interessante. Portanto, no caso de um espaço
entre os itens ou os itens flexíveis, haverá uma quantidade
semelhante de espaço
entre si. Portanto, o item em primeiro lugar
será no fast, nosso ponto de partida
do recipiente de flocos. E o último
item colocado será
no ponto final
do contêiner flexível. E todo o espaço disponível
será dividido entre
os outros itens em flocos
para que eles tenham uma quantidade semelhante de
espaço entre si. Agora, o ambiente é
meio parecido, mas um
pouco diferente. Portanto, no caso de um espaço ao redor todos os itens ou os itens flexíveis terão uma quantidade similar de espaço à esquerda e à direita. Então, como você pode ver aqui, o x é o valor de uma
quantidade similar de pares de bases. Cada item ficou no
lado esquerdo e no lado direito. Agora o espaço é uniforme. Portanto, no caso específico, todos os itens terão a
mesma quantidade de espaço. Portanto, todas as lacunas, incluindo a primeira, têm
uma lacuna entre o início do contêiner
e o último item, mas uma lacuna com a extremidade
do contêiner e a mesma quantidade de
espaço está disponível entre todos os itens
e a borda. Ok? Portanto, esses são os seis
valores de justificar conteúdo e justificar conteúdo somente
de s nas saídas principais. Então, vamos ver isso
com código. Então, vamos fazer isso. Vou apenas
comentar o reverso da coluna de
direção flexível porque vamos usar o
valor padrão, que é rho. Portanto, justifique que o conteúdo também
se arque no contêiner flexível. Então, digamos que foi isso
que justifica o conteúdo. E, por padrão, o
valor é flocos. Iniciar. Portanto, se o salvarmos, ele não mudará nada porque esse
é o valor padrão. Agora, o segundo valor
sobre o qual falaremos é a extremidade dos flocos. Então, no caso de
flocos, ele vai
empurrar o final do recipiente
da frase, que é diferenciado por esse fundo violeta
e uma borda de sangue. Então, essa é a extremidade
do contêiner flexível
e eles serão empurrados
para a
extremidade do contêiner. Agora o centro, e
acho que você já sabe como
isso vai acontecer. Todos os itens ou itens
flexíveis estarão
no centro do
contêiner flexível, assim. Companheiro é o espaço intermediário. Então, vamos fazer isso
porque, a partir de agora o primeiro item estará
no ponto inicial
do contêiner flexível
e o último item estará no ponto final do contêiner de flocos e todo o espaço ao redor do
item, então seria semelhante. O próximo valor
sobre o
qual falaremos é o espaço ao redor. Agora eles terão
a mesma quantidade de SPs para cada item
flexível específico à
esquerda e à direita. Agora, o último valor
para justificar conteúdo é o espaço uniforme na
fofoca em todos os itens. Portanto, teremos uma quantidade
semelhante de espaço entre eles e entre o ponto inicial e final
do contêiner da frase. Então, isso é tudo
sobre o conteúdo justificado. E, novamente, ele vai
se organizar ao longo do eixo x. Este é o lugar onde x está agora, e é assim que ele
vai pensar assim. Mas se mudarmos a
direção da flexão para linha, agora, isso justificará que o conteúdo se arqueará ao longo do eixo principal
ou ao longo da coluna. Portanto, não se confunda. Falaremos mais
sobre isso mais tarde. Agora, no próximo vídeo, vamos falar sobre
os itens de alinhamento.
5. Alinhamento ao longo do eixo transversal: alinhamentos: Os itens de alinhamento são
, na verdade, arcos ao longo do eixo transversal porque justificam
o conteúdo ou
ao longo do eixo principal. Então, neste caso,
o eixo cruzado é, vai de cima para baixo
ou a partícula existe. Então, para demonstrar
isso perfeitamente, vamos dar uma altura
ao contêiner. Vamos dar a ele uma
altura de 400 pixels. E agora, como você pode ver, o primeiro item
vai começar
do topo do contêiner
e vai para o fundo. Esse é o valor padrão
dos itens de alinhamento. Esta é a auréola do estresse. Então, vamos aplicar os itens de alinhamento e eles também são aplicados
no contêiner flexível. Portanto, o valor padrão
é o estresse. Agora ele vai ocupar todo o espaço que tem na
célula no eixo cruzado. Esse é o valor padrão. Agora, há mais olá
disponíveis para isso. Agora, o primeiro são os
flocos, uma pilha. Então, como a única equipe nessa é a mesma que
justifica o conteúdo. Então, ele vai começar
do ponto de partida
do eixo cruzado, que é o topo. Agora, ficará tão apertado na
parte superior quanto o
ponto de partida do eixo cruzado. Agora, o próximo mandato é o fim. Então, neste
caso, estará no final do eixo cruzado. Então isso está na parte inferior. O próximo é o centro. Então, vai ficar no centro
do eixo
transversal, assim. Na verdade, é muito
útil se você simplesmente acessar a LAN, algo no centro. Então, digamos
que você tenha um div e queira colocar outro div
no centro dele. Assim, você pode simplesmente dar flexibilidade à tela DVI
principal, justificar o centro de conteúdo
e
alinhar o centro dos itens. Então, ele
estará no centro. Veremos isso em um exemplo
prático mais tarde. Esse próximo valor aqui
é a linha de base. Portanto, para
entender a linha de base, vamos direcionar
alguns itens separados para lá. Então, eu dei a eles uma classe separada para
cada um dos itens. Vamos direcionar o
item número dois. Então, vamos
colocar esse item em um preenchimento na parte superior, talvez em 100 pixels. E também vamos dar a isso
um preenchimento na parte inferior. Talvez. Vamos dar 200 pixels. Agora, é
preciso que a massa seja a melhor. Também há um alvo
e outros, talvez o item,
e dê a ele uma
parte superior acolchoada de 300 pixels. Agora, como você pode ver aqui,
na verdade, três terminam
um pouco mais, então vou
salvá-lo para 200. Agora, como você pode ver aqui, todos os itens aqui, todo o sabor está
na mesma linha. Então, isso é realmente difícil
que a linha de base faça. Isso é tudo
sobre os itens de alinhamento. E no próximo vídeo, vamos falar sobre o envoltório flexível.
6. Exemplo em mundo real: centrando um mergulho: Agora que
já aprendemos sobre alinhar itens e
justificar
o conteúdo, acho que é a
hora de realmente ver um exemplo prático
do mundo real. Aqui, criei uma seção de
heróis do seu site. Então, isso é muito simples. Temos a
equipe de fundo com a seção e um texto e um botão
no centro dela. Então, isso é o que
vamos criar agora. Mas antes de
entrar no curso, acho que é melhor
realmente planejá-lo para a arte. Então, primeiro
vamos analisar como você vai fazer isso, depois vamos
fazer o curso. Essa é uma prática muito boa para planejar tudo antes de
entrar no código. Então, o que
podemos fazer aqui é criar uma seção e dar
à equipe
de fundo sua seção. E dentro dessa
seção ou do div, podemos realmente colocar os itens, que são o texto
e o botão. Mas vamos
aplicar os movimentos em toda essa seção e colocar o elemento filho
no centro. Se tivermos vários itens
dentro do elemento pai, será difícil. Então, o que vamos
fazer é criar outra div, que conterá todos
os itens aqui. Então eu acho que isso parece meio
confuso, mas vai ficar
fácil se usarmos o código. Então eu criei uma pasta
e, dentro da pasta,
vamos para index.html, um style.css e uma imagem de
fundo. Eu criei a marcação aqui. Temos uma etiqueta de cabeçalho
com a classe do herói. Portanto, esse é o elemento pai
ou o contêiner flexível. Então, temos uma tag de cabeçalho
com a classe zero. Então esse será
nosso contêiner flexível. E dentro desse recipiente, temos apenas um item de flocos, que é o recipiente. E dentro dela, coloquei todos
os elementos que temos aqui, como o sabor do título, subtítulo e o botão. Então este é o item dos flocos e este é o recipiente dos
flocos. Eu também adicionei um estilo
básico porque , caso contrário, isso vai
levar muito tempo. Então, acabei de remover a margem básica e o
preenchimento do navegador
colocando um asterisco e
atribuindo a ele um **** de margem
zero preenchendo o corpo. Também adicionei uma família
de fontes de Poppins e uma cor preta. Então, isso será
aplicado ao texto aqui. E com o herói que será
nosso contêiner flexível, eu adicionei a equipe de
fundo também,
eu também adicionei alguns estilos para o sabor e
também um pouco de acolchoamento na parte inferior dos itens
e também o botão aqui. Então, isso é tudo. Agora vamos aplicar isso. Então, por causa desse design aqui, ele ocupará toda
a janela de visualização. Então, vamos dar à seção do
herói ou ao contêiner, ou ao contêiner flexível uma altura mínima de
100 janelas de visualização. Portanto, isso ocupará toda a altura que pode
ter na janela de visualização. Então, isso vai começar
daqui e dois aqui. Portanto, essa é a altura de 100% da janela de
visualização. E a seção
aqui é o herói. Portanto, dê a ele uma altura
mínima de 100 BAs, que é a altura da janela de visualização. Agora, ele ocupará toda
a janela de visualização. A próxima coisa que
vamos fazer é polir
o
saco, senhorita do condado. Então, vamos aplicar esse plano de fundo. Psi é para cobrir, não para conter. E também é
posicionado nos centros. Então, centro de posição de fundo. Você também pode usar o formulário abreviado, nosso
método abreviado, se quiser. Ok, então temos um encontro. Agora vamos falar sobre
o contêiner. O contêiner obteve
no máximo 878 pixels. Então, vamos fazer isso. Vamos direcionar
o contêiner div, que conterá
todas as coisas aqui dentro que têm sabor e botão e
darão a ele um peso máximo. 780 pixels. Eles estão seguros. Agora, por padrão, ele será alinhado à esquerda. Mas nós não queremos isso. Portanto, também podemos alterar o alinhamento do
texto ao centro. Vamos também adicionar um
pouco de acolchoamento. Centro de Estudos. E vamos
adicionar um pouco de preenchimento à esquerda e à direita. Então, vamos fazer isso. Vou
dar um zero para
cima e para baixo e da esquerda
para a direita talvez 20 peças. Porque quando o tamanho da
tela for menor que 72 peças, ela
sairá para o canto. Então, se simplesmente o removermos e
tornarmos o contêiner menor, como você pode ver, ele
adicionará isso. E se aplicarmos
o preenchimento aqui, ele vai ter alguma lacuna. Ok? Agora adicionamos o
máximo de óleo e o preenchimento. Agora vamos centralizá-lo. Então, aqui, o
elemento principal é o herói, ou a tag de cabeçalho
com a classe do herói. E dentro dele temos o item de flocos, que
é o recipiente. Então, vamos aplicar
os flocos com o herói. Então, vamos fazer isso. Este é o herói
e vamos
aplicar essa demonstração de flexibilidade. Agora vamos para o
contêiner flexível para o item, que é esse contêiner aqui. E vamos
centralizá-lo ao longo do eixo x e ao longo
do eixo cruzado. Então esse é o flexor que existe. E se você quiser
centralizá-lo ao longo do eixo x, usaremos o conteúdo
justificado centralizado. Ele deve ser centralizado
horizontalmente. Agora,
também precisaremos
centralizá-la na partícula existente
ou na cruz que existe lá. Então, vamos usar
o centro de alinhamento de itens. Agora ele deve estar
devidamente centralizado. Existem diferentes métodos de centralização,
pose e elemento, mas esse método de fluxo
também é muito útil e pode ser útil sempre que
você experimenta um exemplo do mundo
real, ou talvez codifique um site para um cliente
ou apenas para você mesmo. Portanto, isso é totalmente responsivo. E, como você pode ver, isso é totalmente centralizado. Se fizermos com que o
tamanho da tela seja menor, ela também ficará centralizada. Se eu quiser
torná-la responsiva, você também poderá adicionar a consulta de
mídia e as etapas. Então, faça com que o sabor seja
menor do que isso, mas não vamos
fazer isso aqui. Apenas para a demonstração
da centralização de um elemento ou do interior de outro
Dave usando flocos. Então, fizemos isso e
temos outro projeto aqui. Aqui, vamos
usar a consulta de mídia. Então essa é
a pontuação deles para o próximo vídeo.
7. Envolva ou faça rap!: Vou deletar
todos os itens aqui, como os azulejos separatistas. Também há comentários sobre isso e digamos que é
assim que parece. Agora, o olá padrão, eles alinham os itens, está lá, então está ocupando tanto
quanto está. Está disponível para os itens. Agora, aqui, existem
apenas seis itens flexíveis. E também vou
comentar o conteúdo do justify. Então, agora insira o contêiner
flexível. Temos seis itens. Ele será colocado
dentro do item flexível. Na verdade, ele tem um espaço
dentro do contêiner, mas digamos que temos muitos itens que não
cabem no contêiner. Eu só vou adicionar
alguns outros itens aqui. Então, temos 12 itens flexíveis. E, como você pode ver, há apenas um espaço para nove itens flexíveis dentro
do contêiner flexível. O outro vai
ficar do lado direito. Transbordando, eles
flexionarão o contêiner. Na verdade, podemos modificar isso
usando a etapa de rampa de flocos, também uma propriedade que pode ser
usada no contêiner flexível. Portanto, o valor padrão da armadilha de
flocos é a rampa sem rampa. Então isso significa que ele
ocupará apenas o espaçamento horizontal aqui. Então, se os itens
vão transbordar,
ele estará
na mesma linha. Então, vamos definir que os flocos se rep e o
valor padrão não seja encapsulado. Portanto, isso não vai
embrulhar nada que transborde
os itens extras para fora do contêiner flexível. Agora, se quisermos colocar em seguida, os itens excessivos estiverem
na próxima linha, usaremos o representante. Agora ele vai
empurrar os itens extras. Na próxima linha. Há também um sujeito
chamado Rapidamente Pior. Isso significa que vai,
a primeira linha será empurrada no final
da saída cruzada. Então, isso é herdar
a segunda linha. Ele vai começar
do primeiro tom, do
segundo tom, e
vai para o aplicativo,
que é o agonista que cruza saídas ou a reversão
do eixo cruzado. Agora vamos voltar ao rap.
8. Alinhamento de itens multiline: conteúdo de alinhamento: Aqui, como você pode ver, precisamos definir linhas e há uma propriedade
que podemos usar com o contêiner flexível para
alinhar os itens da segunda linha, esse nome da propriedade é
o conteúdo da companhia aérea. Portanto, o conteúdo
da companhia aérea e o conteúdo
da companhia aérea só são úteis se tivermos várias linhas
de elementos do Felix. Caso contrário, é inútil. Portanto, há sete valores
para o conteúdo do alinhamento e o valor padrão é o
mesmo dos itens de alinhamento. Então esse é o estresse. Vai
ocupar todo o espaço que tiver, como você pode ver aqui. A primeira linha vai pegar, ou
seja, basicamente tem,
e a segunda linha também, então elas são meio parecidas. Portanto, há espaço estadual. Essa pequena lacuna aqui é para a margem
aqui que adicionamos. Portanto, esse é o valor padrão. O próximo valor são os flocos, pois também são semelhantes aos itens de alinhamento. Isso colocará
todos os elementos no ponto
inicial
do eixo cruzado
porque o conteúdo da linha aérea é que itens sempre aplicados no eixo cruzado. Eu só vou
torná-lo um pouco mais alto. Então, agora isso vai
ser no início, ao longo do eixo transversal. Agora, se você quiser
empurrá-lo até o final, como herdar a parte inferior, também
podemos fazer isso
usando a ponta dos flocos. Esse próximo valor
será o centro. Então eu acho que você já
sabe o que vai acontecer. Todos os itens estarão no
centro ao longo do eixo transversal. O valor da lista que obtivemos aqui
é o espaço entre eles. Agora, isso será semelhante ao
conteúdo justificado que vimos. Então, agora todo o espaço
disponível estará entre as duas
linhas diferentes de itens flexíveis. O próximo valor é
o espaço ao redor. Então, agora eles
terão uma quantidade similar de pares
de bases na parte inferior e na parte
superior de cada uma das linhas. O próximo mandato é uniforme. Agora eles terão uma quantidade
similar
de espaço na parte superior e
entre os itens. Portanto, haverá
uma quantidade similar de espaço entre a div do contêiner ou a borda da
div do contêiner e entre as linhas. Então, esses são os conteúdos da LAN e podem ser muito úteis. Quando temos várias
linhas de itens flexíveis. E mesmo para maior capacidade de resposta , digamos que temos três itens
para uma tela maior. E se fizermos com que o
tamanho da tela seja menor do que uma estrela, os itens serão
empurrados para a próxima linha. Então, para
alinhá-los perfeitamente, podemos usar a propriedade align
content. Agora vamos falar sobre o boné.
9. Espaço entre os itens do flex: diferença: Vou apenas comentar
o conteúdo do alinhamento
aqui e vamos salvar. Agora eles
obterão o valor padrão. Agora, podemos ver essa
pequena cabine ao redor dos itens. Isso é para a margem. Vamos comentar isso. Digamos que agora não
haja nenhuma lacuna lá, na verdade adjacente uma à outra. Agora, há uma
propriedade para criar lacuna entre os itens flexíveis, que
na verdade é chamada de lacuna. Ok? Portanto, existem dois tipos de lacuna. Podemos usar a frase container. Portanto, o primeiro termo é a tampa traseira e o segundo
termo é a lacuna da coluna. Portanto, o AP não autorizado será aplicado entre dois itens
diferentes, como entre duas linhas diferentes. Então, vamos tentar essa lacuna entre linhas. E eu vou usar
dez peças aqui. Agora, como você pode ver aqui, essa é uma lacuna de dez pixels entre
as duas linhas diferentes. Se quisermos limpar
alguma lacuna entre
as colunas, há entre os
itens dentro da coluna. Podemos usar a coluna. Sim. Selos, talvez 15 peças. Agora haverá uma boa
lacuna entre eles. Mas se você não
colocar dois
valores diferentes ou ambas as partes. Portanto, você também pode comentar
isso e testar a lacuna. A lacuna sem especificar
a linha ou a coluna. Ele vai aplicá-lo tanto
na linha quanto na coluna. Então, vamos experimentar 15 peças. E isso
vai criar uma lacuna entre os itens ao longo da linha
e da coluna de 15 pixels. Se você não tem um
tipo diferente de valores, também
podemos fazer isso. Então, vamos experimentar cinco peças aqui. Portanto, o primeiro valor aqui
será a linha e o segundo valor
aqui será para a coluna. Agora, a lacuna de 15 peças
está disponível entre as fileiras de cabelo e
as provocações
de luta estarão disponíveis
entre as colunas. Então, essas são as propriedades que podemos usar no recipiente
de flocos. E no próximo vídeo, falaremos sobre
algumas propriedades diferentes que podemos aplicar
nos itens do local. Então nos vemos lá.
10. Ordem dos itens flexíveis: Até agora, falamos apenas sobre as propriedades
que podem ser aplicadas, o contêiner facial ou
o elemento pai. Agora, a partir deste vídeo, falaremos sobre
as propriedades que podem ser aplicadas nos
elementos secundários ou nos itens flexíveis. Então, a princípio, vamos
falar sobre o pedido. Então, por padrão, isso será ordenado como está, por exemplo. O primeiro item vem primeiro, depois o segundo item. A maneira como realmente codificamos isso. Isso vai ordenar na
mesma direção e na mesma ordem. Então, eu vou apenas reduzi-lo. Vamos manter apenas quatro itens
e até que seja levantado. Ok. Além disso, vou excluir as coisas aqui para
torná-las menos confusas. Além disso, vamos comentar isso. Também a margem. E eu vou
colocar uma pequena lacuna aqui, como 15 pixels. Ok, tudo bem. Pronto para ir. Agora, o
primeiro item vem primeiro, depois o segundo e o
terceiro depois o quarto. Então, digamos que
queremos alinhá-los, ordená-los de forma diferente. Então, por padrão, todos
os itens em flocos têm uma ordem padrão de zero, mas na verdade podemos aplicar a ordem separadamente nos elementos
secundários. E a regra é que quanto menor
a ordem do elemento
, ele vem rápido. Então, aqui, por padrão, todos os itens têm
a ordem de zero. Então, se colocarmos, se
dermos a ele um elemento ou o item dos flocos e a
ordem de menos um, que é menor que zero, ele virá primeiro. Então, digamos que vamos
direcionar o item três. Aí vem o terceiro, e dê essa ordem
de menos um. Então, vamos fazer esse item três e dar a
ordem de menos um, que será
menor que zero e menor. A ordem é: vem rápido. Vamos salvar isso.
E, como você pode ver, os terceiros itens vêm rapidamente. Então, podemos realmente usá-lo
e é muito útil. Veremos mais
sobre isso no próximo vídeo. Mas, por enquanto, vamos pedir mais
alguns itens dentro dela. Então, o primeiro item
vem no final. Então, se direcionarmos o item no
qual está o primeiro item, agora ele está na segunda
posição porque o terceiro item recebeu um
pedido menor que zero, que é da ordem de on. Então esse é o primeiro item que
recebeu uma ordem de zero. Agora, digamos que damos
a ordem de talvez cinco. Agora ele tem
mais ordem do que o resto
dos itens porque
o segundo item aqui tem uma
ordem padrão de zero. O terceiro item recebeu a
ordem de menos um e o quarto item
obteve 84 ordem de zero. Agora,
o item um tem o maior pedido, então ele virá por último, porque quanto maior o pedido, ele estará no último
item da ordem de cinco e virá no último. É assim que
vai funcionar. Então, digamos que queremos empurrar o quarto item, o primeiro item. Também podemos fazer isso se
direcionarmos o item
e dermos a esse pedido um valor maior
do que o item para item
e dermos a esse pedido um valor maior
do quem recebeu
a ordem de cinco. Então, vamos dar
mais do que isso. Então, vamos dar seis e ele virá depois
do primeiro item. Mas uma coisa é que, se
tivermos vários elementos secundários
com a mesma ordem, o que acontecerá então? Nesse caso, o alinhamento ou a ordem aparecerão
conforme codificamos aqui. Então, digamos que o item
da ordem de cinco, o item para um pedido do
mesmo valor, isso é cinco. Agora, se salvarmos isso como
o item um vem primeiro, então esse é o item quatro. Então, agora o último item
será o item quatro
e, antes disso, o item
estará à venda. Agora, os quatro vêm por último e o primeiro item
vem antes disso. Então, isso é tudo
sobre o pedido. E isso pode ser muito útil
sempre que você fizer pedido diferente em uma
tela menor ou qualquer outra coisa. Então, no próximo vídeo, faremos esse projeto para que possamos ver mais sobre
a ordem e o fluxo. Então, vamos fazer isso.
11. Exemplo em mundo real: altere a ordem em exibição menor: Neste vídeo, vamos
manter isso como posturas simples que podem ensinar muitas
coisas sobre o flexbox. Então, este é o nosso projeto e
esta é uma seção de heróis. Então, antes de entrar no código, vamos expandir isso. Então, temos um contêiner. Este é o nosso contêiner aqui. Eu só vou
desenhar um retângulo. Ok? Então esse é o contêiner. Basta dar um toque
e removê-lo. Ok? Então, este é o recipiente
e vamos colocar os flocos
por dia neste recipiente. Aqui. Dentro desse contêiner, temos outro que
será nosso filho flexível. Então, será
o filho do nosso
item flexível, que é este. Então essa é a fase infantil e esse é o contêiner flexível. Assim, podemos aplicar os efeitos de
exibição
no elemento principal e também fazer com que ele justifique o centro do conteúdo, alinhe o centro dos itens
para que
fique centralizado ao longo
do eixo transversal. E também a principal análise de fluxo. Também vamos dar
uma altura máxima para
que não saia
do branco disso. Então, dentro dele, novamente, vamos usar o display
flex neste contêiner, que na verdade é o
elemento filho de um contêiner flexível. Ao usar o display
flex, vamos aplicar
a itens diferentes. Como se tivéssemos essa div
aqui, que é essa. Eu só vou
dar um derrame. Este será um item rápido
ou o item em flocos dentro
deste recipiente flexível. E o segundo termo que
temos aqui é esse aqui. Portanto, a imagem é o
segundo item flexível e o primeiro item da lista será esse sabor. Então, vamos colocar todos os
gostos dentro de uma div. Então, vamos a diferentes
profundidades dentro
desse recipiente de flocos e
vamos alinhá-lo. Portanto, no caso de uma tela de tamanho
pequeno, faremos a direção
flexível para a coluna. Agora, por padrão,
será a linha. Mas em uma tela pequena, não
somos os
e-mails que chegam rapidamente na parte superior e, na parte inferior,
vamos colocar o sabor. Então, vamos fazer isso. Vou começar
do ponto de vista viscoso. Então, vamos criar uma tag de cabeçalho
com a classe Theta. Então, isso vai
conter tudo. Então, esse é o elemento principal e vamos adicionar uma cor de
fundo a ele e usar a tela flexível para tornar o conteúdo dentro
de seu centro. Agora, em vez disso, vamos
pegar o contêiner div. Este será nosso
segundo contêiner flexível. Dentro deste contêiner,
definimos
imediatamente que o DBS conterá todo o sabor. Outro vai conter
a imagem. Então, vamos fazer isso.
Em vez disso, eles jantaram. Vamos criar um div e eu
vou dar a ele uma classe de
conteúdo de contêiner. Ok, tudo bem. Agora, em vez disso, é mais tarde Susan
Sontag e coloque todos os gostos. Vou apenas
copiar e colar isso. Ok, vamos lá. Agora, para a tecnologia Prager, vamos colocar um texto
fictício como Lorem Ipsum. Então temos dois botões
diferentes. Na verdade, é um EMS. Eu só vou dar a
Steve um nome de classe de Hero. Botões Hero. Ok, inserido como
se trata de um botão ou link, vamos usar a
tag âncora aqui e inseri-la, deixa selar as imagens. E acho que o
nome da imagem está armazenado em ponto PNG. Vou copiar e
colar isso porque
temos dois itens diferentes aqui. O segundo termo é
a Play Store. Ok, tudo bem. Este é o servidor ativo e podemos
ver os itens aqui. Agora, está bom o segundo que está
dentro do contêiner. Então, esse será um contêiner
flexível e esse é o item de flexão rápida e o
conjunto de camadas do segundo item de inversão, que
será uma imagem de herói. Vamos dar isso, agrupá-los, herói
Amos, dentro dela. Vamos adicionar as
imagens do herói dot PNG. Nós entendemos. E, por padrão, essa será
uma linha como essa. Não sei por que o cursor
está piscando desse jeito. Ok, agora vamos passar para o style.css que eu já adicionei. Ok, eu não fiz nada, então vou
minimizar isso. E, como você pode ver, há uma margem e um preenchimento padrão. Então, se usarmos apenas a estética para remover o estilo
padrão, você poderá fazer isso em zero. Agora, não há nenhuma lacuna
à esquerda e à direita. Então, vamos adicionar um preenchimento de zero. Apenas esteja seguro. Agora vamos atacar o herói aqui, que é o elemento pai, que conterá
tudo dentro dele. Com o herói. Eu só vou dar a
isso uma altura mínima. Na verdade, vamos definir a cor
de fundo primeiro. Vou colocar um código de cores
hexagonal como D, E, D três CA. Então essa é a cor da pelagem
colorida salva e obtivemos a cor do cabelo. Agora, vamos dar a isso uma altura mínima de
100 de altura vívida. Então, ele vai tomar a altura
da janela de visualização. Depois disso. Vamos manter o herói
em uma tela flexível. Mas antes disso, isso deu a ele uma cor do texto, como se fosse um miniaplicativo, todo aquele sabor aqui. É meio enegrecido. Agora vamos direcionar
a div do contêiner. Então, vamos fazer esse contêiner. E vamos
dar a isso um máximo de oito de 13 70
pixels. Vamos economizar. Agora. Tem 13 70 peças de altura, mas não podemos vê-la porque
na verdade não está no centro. Então, agora vamos aplicar
a flexibilidade da tela nisso. Então, agora você precisa
definir itens flexíveis. Por padrão, a
direção flexível é linha, então ela aparecerá após a outra na direção
horizontal. Então, vamos fazer com que a tela seja flexível. Vamos economizar. Como você pode ver, parece assim. Então, agora não somos todos os
itens no centro, como ao longo do eixo cruzado. Assim, podemos usar o centro de
alinhamento de itens. Agora eles estão
centralizados ao longo do eixo cruzado, mas também para ter certeza, também vamos usar o
espaço de conteúdo justificado entre eles para que a imagem fique
no canto final da flexbox, que é o contêiner. E o texto aqui
estará
no ponto de partida
do contêiner flexível. Então, vamos usar justificar o
conteúdo entre. Isso não
mudará nada porque todos os itens
ocuparão tudo o que o explícito pode ter. Também há uma pequena
lacuna entre os itens. Eu só vou
usar o phi viewport. Portanto, serão cinco
por cento do OID total. Agora vamos
fazer com que seja o centro. Então, acho que vimos isso
no projeto anterior. Então, vamos atacar
o herói que tem apenas elementos infantis
dentro disso. E dê a isso uma exibição de
flocos. Então, vamos fazer isso. Exiba falsificações e
justifique o centro de conteúdo. Alinhe o centro dos itens. Portanto, ele será
centralizado ao longo do eixo x e ao longo
do eixo cruzado. Agora, vamos fazer um
pouco de estilo. Vou copiar e
colar isso porque
não vou roubar
tempo aqui, e assim por diante. Um filho que é é o texto do título. Eu tenho uma fonte, fonte familiar, altura da linha, margem e
parte inferior para preencher lacuna com o texto geral. Para a tag de parágrafo, temos uma família
de fontes de Poppins aqui. E também formou o tamanho ou alguma margem inferior para obter
alguma lacuna com as imagens aqui. Ok, então acertamos
tudo. Agora vamos também adicionar
um preenchimento com o contêiner porque não
podemos ver nada
diferente aqui. Mas para a tela de menor
tamanho, vamos
adicionar um pouco mais. Especialmente porque se o
tornarmos menor. Como você pode ver, sempre que
for menor que a altura máxima, como 13.70 pixels, será como
no ponto final, no início
do contêiner
ou, desculpe, no navegador. Agora, se adicionarmos um
pouco de preenchimento com o contêiner
na parte superior e inferior, digamos 50 pixels
e à esquerda e à direita. Há esses 30 pixels. Vamos economizar. Ok, agora você tem essa pequena
lacuna com o preenchimento. Então, vamos torná-lo responsivo. Então, para torná-lo responsivo, vamos usar
a consulta de mídia. Ok, então vamos fazer isso. Vou apenas digitar se a mídia está limpa e vamos dar a ela
uma largura máxima. Portanto, quando o tamanho da tela for menor que essa altura
máxima, ele será aplicado. Então, vamos dar a ele uma
altura máxima de nossos 12.70 pixels. Eu só vou detalhá-lo nesse navegador específico. Então, na primeira lista, eu
pego o contêiner e vamos fazer a direção
flexível para a coluna. Então, se fizermos a
direção flexível para a coluna. Quem está agora é, por
padrão, aquela linha ali, então fica mais feliz na fila. E se fizermos a
direção flexível para a coluna, elas aparecerão na vertical que existe
após
a outra. Então, vamos fazer isso.
Vou apenas direcionar o contêiner
e dar uma direção flexível para a coluna Salvar. E como você pode ver, será eu emparelhado
e a coluna existirá, que é a
vertical que existe agora, esse é o fluxo principal que existe agora porque mudamos a direção de flexão
padrão. Mas, como você pode ver
aqui, por padrão, a ordem será
exibida da maneira
que codificamos aqui. Então, dentro dessa div de contêiner, temos o primeiro item aqui, que é o conteúdo do contêiner desse sabor e o botão ali, então eles vêm rápido. Depois, há o segundo item. Agora, por padrão, todos
os itens dentro do contêiner flexível
têm a ordem de zero. Então, podemos, vamos
direcionar esses e-mails aqui e vamos colocá-los rapidamente. E podemos fazer isso de
duas maneiras diferentes. Podemos reduzir a
ordem desse EMS do que zero. É assim que vamos
colocá-lo antes da caixa de texto aqui, como o conteúdo do contêiner. Agora, o
conduíte do contêiner caiu de ordem
zero e será como menos um, que é menor que zero. Então, vai aparecer rápido. Além disso, podemos fornecer
a isso o conteúdo do contêiner se o modo
Olá for zero. É assim que será maior do que a ordem
do herói EMS, que é zero por padrão. Então, vamos direcionar
a imagem do herói e dar a ela a ordem
de menos um, então será menor que
zero. Então, vamos fazer isso. O herói vai colocá-lo
na próxima linha aqui. Emails de olá. E há a mesma ordem de
menos lá,
exceto, e agora os EUA vêm rápido, depois há o sabor. Ok, então vamos torná-lo
ainda mais, menor. E, como você pode ver,
essa imagem está meio que transbordando. melhor que vou fazer
é adicionar o cabelo do EMS
como uma imagem de herói. E vamos focar na tecnologia EMS, especialmente para o MS.
E vamos
dar a isso um OID
máximo de cem por cento, para que não exagere mais. Então, esta é a nossa seção de heróis. E parece bom. Além disso, você pode reduzir um
pouco
o tamanho da fonte para essa tela de tamanho
menor. Mas esse não é o ponto aqui. Vamos
ver como é a ordem
dos itens e outros
itens e propriedades flexíveis. Então, agora isso é totalmente responsivo
em telas maiores. Esses gostos vêm rápido, depois há as imagens. E se fizermos com que o tamanho da
tela
seja menor, será
o contrário. Portanto, o EMS conta rapidamente
após o ponto de interrupção, que é de 1.270 pixels. E então o EMS vem rápido. Então, isso é tudo
sobre esse projeto. Espero que tenham gostado e nos
vemos no próximo vídeo.
12. Distribuição de espaços extras: flex-grow: Neste vídeo, vamos falar
sobre o crescimento dos flocos. Então, como você pode ver aqui, insira o contêiner da frase. Temos quatro itens diferentes e eles estão levando
apenas o necessário. Por outro lado,
o cabelo está livre. Então, esses são os
espaços vazios e os flocos crescem. Ao usar o flex grow, podemos realmente usar
as despesas extras. Então, vamos ver como podemos fazer isso. Por padrão, todos os itens chamados
flexíveis padrão crescem até zero. Portanto, o valor padrão
da frase crescer é zero. Agora, se dissermos a um determinado item ou elemento que um
tipo diferente de local para cultivar, isso acabará com
o negócio de raios-x. Então é assim que
vai funcionar. Então, vamos segmentar um item
específico, como o item quatro. Se dermos uma frase a essa, cresça sabendo o que vai acontecer. Agora, por padrão, todos
os outros itens, como o item da
terceira frase, cresceram em zero. Portanto, eles não vão
se estressar versus
só tomarão o
quanto precisarem. Mas agora o item da frase
Kata cresceu e o grupo de amigos é sobre
o excesso de negócios, ok? Agora, como tem o grupo de
frases ativado
, vai precisar de
todo o SPSS extra. Então, vamos salvá-lo. E como você pode ver, isso vai levar todas
essas peças que sobreviveram. Agora, podemos dividir
os espaços de estado entre vários itens flexíveis. Como podemos fazer isso? Então, esse item é para Deus, se eles errarem nesse
alvo e fugirem. Então, digamos o item
dois, o segundo termo. E vamos dar a
isso uma frase de três. Então, agora o que
vai acontecer é que vamos apenas
comentar isso. Então, este é o ônibus expresso e ele será
dividido em quatro partes. Portanto, as três partes
das quatro versões
serão atribuídas ao segundo item porque recebeu a
frase árvore de crescimento. Essa
porção restante será dada
ao item porque
ele cresceu em flocos. Então, vou
simplesmente descomentar isso. E, como você pode ver, todos esses espaços foram dados ao quarto e
ao segundo item. O segundo item recebeu
um grupo de fase três. Então, ele vai ocupar a parte de
três quartos dos espaços e o fóton
terá apenas uma parte. Então, se direcionarmos o
item aqui e mantivermos o mesmo
valor do item para. Então, por favor, aumente
o item, pois o item um receberá
a mesma quantidade. E agora, neste caso, ele será
dividido em cinco partes porque em dois mais três, isso significa que cinco
na porção ou o impróprio, especialmente impróprio,
será dado ao item para a mesma pessoa ou o
mesmo será dado especialmente ao item em questão e três quintos parcelas serão
dadas ao segundo item. O terceiro item não
tem nenhuma bandeira crescendo lá, então ele pegou o valor
padrão de zero. E só vai demorar
o quanto for necessário. Isso é tudo
sobre o crescimento dos flocos.
13. Alinhe um item específico de forma diferente: align-self: Ok, agora vamos falar
sobre a célula da companhia aérea. Então, já falamos
sobre os itens de alinhamento. Portanto, os itens de alinhamento são aplicados no contêiner da frase
ou no elemento pai. Mas as vendas
da companhia aérea serão aplicadas no elemento secundário
dos itens em flocos. Então, para demonstrar isso, vou simplesmente descomentar
a altura do item. Agora, por padrão, ele
capta os itens alinhados e
tem seu gosto, então está funcionando. Tudo o que o explícito pode ter
ao longo do eixo cruzado porque os itens da companhia aérea
ao longo da cruz existem. Ok? Agora, digamos que vamos ao centro de itens da
companhia aérea e a companhia aérea vende apenas um
arco ao longo do eixo transversal. Então, aqui, todos os itens em
flocos ficaram no centro dos itens de alinhamento
porque
aplicamos os itens de alinhamento
com o contêiner div, que é a frase container. Agora, digamos que queremos uma companhia aérea de
itens separadamente. Então, como podemos fazer isso? Então, para fazer isso, existe o eu da companhia aérea. Portanto, usando células de lente, podemos direcionar um elemento flexível
específico e alinhá-lo separadamente. Então, digamos que temos os
terceiros itens e cabelos, e queremos alinhá-los forma diferente do
resto dos itens. Então, vamos fazer isso. Vamos direcionar a árvore de itens
e dar a ela uma célula de alinhamento. E no palácio, o valor
padrão é automático. Isso significa que o item terá o mesmo alinhamento fornecido com um contêiner flexível,
que é o centro. Portanto, isso é um meio automático. Agora, se você quiser
fazer isso de forma diferente, também
podemos fazer isso. Então, vamos atacar os flocos. Isso significa que você já
sabe que ele estará no ponto inicial
do eixo cruzado, que está no topo. Isso fará com que seja flexível. Estará no
final do eixo cruzado. Agora, o próximo que
temos aqui é o centro. E acho que vai ser
o mesmo de antes, porque esse é o centro. Além disso, se você quiser
expressá-lo através do, ao longo do eixo transversal. Então você também pode fazer isso. Vamos pressionar Salvar. Nós entendemos. Além disso. Podemos usar a linha de base aqui. Então, esses são os valores. Portanto, podemos usar com
as vendas da companhia aérea para alinhar itens
separadamente do resto dos itens que serão alinhados usando
a propriedade align items
com o contêiner de flocos. Portanto, também é muito útil sempre que você
cria algum tipo de cartão. Então, digamos que queremos uma placa de
rede LAN separadamente
dentro do contêiner. Então, isso é tudo
sobre o eu da companhia aérea.
14. Alterando o tamanho padrão por base flexível: Agora vamos falar sobre
a base flexível. Eu não acho que
vamos usá-lo na real, todos os aspectos positivos
ou na vida real. Mas aprendi que vou
apenas excluí-lo e, digamos, também
removi a altura. Na verdade, vou
mantê-lo, mas alinhar os itens. Vamos fazer com que seja um arranque flexível. A base fixa será usada
para fornecer um item flexível separado
e um tipo separado de óleo. Ou o espaço que ele pode
ter ao longo do eixo x. Então, digamos que vamos
direcionar o segundo
item aqui, o item dois. E temos alguns espaços
extras, certo? Então, digamos que
vamos dar
ao item uma altura de 50 por
cento. Como podemos fazer isso? Podemos fazer isso
usando a base flexível. E podemos dar um valor de pixel ou um valor
percentual para tudo. Mas o valor padrão
da base flexível é automático. Portanto, isso exigirá o
máximo de necessidades específicas. E de acordo com os flocos, alinha os itens ou
justifica o conteúdo. Esse é o valor padrão. Se você quiser dar a ele um tipo
separado de valores como o denso presencial
em 50 por cento, ele ocupará 50 por
cento de todo o espaço. Digamos que temos mais valores
do que isso, como em 100%. Em seguida, ele passará para a próxima linha
porque os engenheiros devem obter 100% ao longo
dos flocos, que é que isso existe. Então, vamos testá-lo com
algumas outras propriedades aqui, como o item três, desculpe, nós o chamamos de ponto aqui. Ok, vamos dar a isso uma base de flocos de 50
por cento. Vamos economizar. Vai demorar, eu só vou reduzir um
pouco cerca de 48 fases. Então, podemos realmente colocar
dois itens dentro disso. Além disso, vamos dar o item
pelo mesmo amarelo. Na verdade, acho que precisamos
reduzi-lo mais do que isso. Como se 45 não fosse um arco. Novamente, nosso começo. Se você quiser criar um layout
complexo como esse, podemos usar a frase base, mas acho que isso não é muito prático porque, no caso
desse tipo de layout complexo, sempre
podemos usar a grade
CSS para isso, mas é melhor
saber outras coisas. Ok, então isso é tudo
sobre a passagem de fase. Veja no próximo vídeo.
Sofiullah Chowdhury, Web Developer & UI/UX Designer
