CSS FlexBox: Dicas para começar |

Подписаться 448 тыс.

Просмотров 91 тыс.

50% 1

O Flexbox é uma ferramenta do CSS criada para distribuir elementos de uma forma responsiva em um determinado layout. Nesse Alura+, a nossa instrutora Juliana Amoasei explica sobre o funcionamento e as propriedades dessa funcionalidade. Quer saber mais? Vem com a gente!
#flexbox #css #frontend #desenvolvimento
🔗 Links citados no vídeo:
bit.ly/artigo-alura-flexbox
yoksel.github.io/flex-cheatsh...
css-tricks.com/snippets/css/a...
👩‍💻 Conheça nossa escola de Front-End: www.alura.com.br/cursos-onlin...
😉 Gostou desse vídeo? Confira também:
▶ Aprenda o básico sobre Flexbox e já comece a programar
bit.ly/basico-flexbox
▶ CSS: o que podemos fazer com ele? #ImersãoHipstersCSS
bit.ly/o-que-da-pra-fazer-com-css
📄 Quer saber sobre as novidades do universo da tecnologia e semanas de conteúdo gratuito da Alura? www.alura.com.br/imersao
🎧 Podcasts
hipsters.tech/
📲 Fique de olho nas novidades!
Instagram: / aluraonline
Twitter: / aluraonline
Facebook: / aluracursosonline

Наука

Опубликовано:

6 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 129

@zaaaaaaad 2 года назад

Essa instrutora nasceu pra ensinar. Super clara, dinâmica e prática na explicação.

@marcelorafael23 3 года назад

Domingo 17h30min, ela poderia ta vendo TV ou passeando, mas ela gravou uma aula espetacular dessas. Deus abençoe sua vida por inteiro. Muito Obrigado.

@CarlosEduardoLou 3 года назад

Melhor explicação que já vi, parabéns pelo maravilhoso conteudo.

@alura 3 года назад

Obrigada pelo carinho e que bom saber que curtiu a explicação, Carlos! 💙

@devciente 2 года назад

Realmente

@jessesalviano6252 3 года назад

Você é uma professora incrível.

@AndersonOsj 2 года назад

Excelente, Ju!!! Obrigado!!!

@fernandinhofiuza 2 года назад

Aleluia...Juliana Amoasei... Consegui entender o que é Flexbox, vou treinar agora ...meus sinceros agradecimentos.

@pkmusicpro5557 2 года назад

Baixei tua aula faz tempo, só assisti ontem, amei e voltei para me inscrever e agradecer o clássico foi.

@gilmarlima2697 2 года назад

Explicação melhor que essa ainda não vi no yt.

@ronaldoriosespindola3716 3 года назад

Cara, com essa aula eu finalmente entendi flexbox. Muito obrigado!

@alura 3 года назад

Que bom que ajudou, Ronaldo 💙 Bons estudos por aí!

@joseguilherme318 3 года назад

esse video foi sensacional. explodiu minha mente! eu tava fazendo muita confusão com esses parâmetros e não tava chegando muito longe. agora entendi perfeitamente

@CarlosBatista-sp1ho 2 года назад

O melhor já visto, parabéns Juliana

@IvanOlivenbaum Год назад

Que professora incrível, obrigado.

@militaoo3613 3 года назад

Muito obrigado por essa aula, tava me matando aqui e você simplificou de uma forma incrível o conteúdo. Parabéns!!!

@hudsonmenezesdev 2 года назад

Melhor aula sobre Flexbox que já encontrei! Tive problemas em meu projeto e graças a Deus encontrei esse video! Muitíssimo obrigado e parabéns pela excelente explicação ♥

@leonardoajaxti8090 2 года назад

Aulão sensacional!!! Parabéns pela didática excelente e compartilhamento de materiais.

@karineoliveira0101 2 года назад

Obrigada, sério mesmo. Que aula!

@Alexbiscoito1 2 года назад

Nossa vc explica tão bem. obrigado por essa aula

@valdemirochaves 2 года назад

Muito muito muito bom. Muito obrigado pelo conteúdo. Parabéns!

@leobragacunha 2 года назад

Excelente vídeo! Muito obrigado pela explicação, super didática!

@akashic4058 3 года назад

Sua voz é bem penetrante e sútil, parabéns, poucas pessoas conseguem ensinar bem, e você tem o dom, obrigado por compartilhar isso!

@fernandobatista4881 2 года назад

parabéns, muito bem explicado .

@ualacesantos3654 2 года назад

perfeita essa aula, obrigado e parabens

@aloka23 2 года назад

Nossa! Explicação maravilhosa. Fala e explica muito bem. LIKEZÃO

@alura 2 года назад

Ficamos felizes que tenha gostado! 😁💙

@hightecsoftware3157 3 года назад

muito bom!! que venham muito mais conteúdos assim. agora posso refazer uma pagina inteira e retirar alguns erros do mau uso do flexbox.

@alura 3 года назад

Que bom saber que o conteúdo foi útil pra você! 💙

@humbertolima2339 3 года назад

Me ajudou muito! Obrigado!

@brunosandres 3 года назад

Muito obrigado. Tenho dificuldades com o tema e ajudou bastante. Como professor, digo que tua didática é excelente. Como aluno, digo que é do caralho, kkk

@alura 3 года назад

Oi Bruno! Ficamos felizes que você tenha curtido a explicação e didática dessa mini-aula. Muito obrigada pelo carinho e sempre que precisar, estamos por aqui! 💙

@matheusspbr 2 года назад

Que aula excelente! Finalmente consegui entender flexbox 🙌

@alura 2 года назад

Que bom que você curtiu, Matheus. Pode contar com a gente! 💙

@DayaneSantos_ 3 года назад

Muito bom sua aula 👏🏻👏🏻👏🏻

@llkessioll 3 года назад

Que conteúdo incrível. Parabéns muito obrigado.

@alura 3 года назад

Shooow, Kessio! Que bom saber que você curtiu o conteúdo. 💙

@ae8973 Год назад

Valeu Ju! Resolveu meus problemas... didática maravilhosa!

@alura Год назад

Bom demais saber que você tá curtindo e aprendendo💙✨

@clebersilvasantos1098 2 года назад

... muito top !! senti falta de mais coisinhas aí heim !! dá pra fazer mobile usando só flex por exemplo ;-) ... parabéns

@MARCOSLIMA-kf2wm 2 года назад

Muito bom.

@TheBatdeath 3 года назад

Aaaaaaaaaaa que explicação explicadinha velho, agora entendi direitinho a flex! Te amo!

@alura 3 года назад

Fico feliz por saber que essa explicação te ajudou, Jefferson! Obrigada pelo carinho e conte sempre com a gente! 💙

@fabriciolima9583 3 года назад

Obrigado. Finalmente eu entendi como funciona o flexbox. Parabéns mesmo.

@alura 3 года назад

Que bom que ajudou, Fabricio! 💙

@anapaulalopesaraujo3824 3 года назад

Arrasa Ju!

@julianaamoasei1220 3 года назад

Obrigada Anaaaa!

@messiasgcardoso 3 года назад

Parabéns pelo contéudo e didática!

@alura 3 года назад

Que bom saber que você curtiu o conteúdo e a nossa didática, Messias! 💙

@AnaLuciaPDS 3 года назад

A Ju arrasou na explicação, entendi super bem!

@alura 3 года назад

Valeu, Ana! Que bom que você curtiu a didática da Ju! 💙

@matheusmartinez5455 3 года назад

otima didatica.

@wellsan9108 2 года назад

Eu estava pensando Assim : pronto ela terminou a explicação legal vou pra outro video mais kakakak a danada me falou tudo o que eu precisava para fazer a prova da faculdade ! nossa muito obrigado estou tão surpreso que decide fazer esse comentário no seu canal muito obrigado de todo o meu coração

@alura 2 года назад

Muito obrigada pelo carinho, Well! Ficamos felizes em ter contribuído para o seu aprendizado 💙

@toledo01ful 3 года назад

Muito bom

@jvictort8851 3 года назад

É realmente um excelente vídeo.

@alura 3 года назад

Valeu, Téo! Que bom que você curtiu o vídeo! 💙

@Luciano-ue4bh 3 года назад

Top em... Aquela janela na direita com o código, é uma extensão do visual Studio?

@ramongoncalves6168 3 года назад

Me apaixonei nessa moça, explica bem de mais!

@alura 3 года назад

Valeu pelo carinho, Ramon! A Juliana tem mesmo uma boa didática! 💙

@viperluan 2 года назад

Parabéns pela ótima didática!

@alura 2 года назад

Obrigado, Luan! Tamo junto! 😎

@LuizHenrique-mn5hv 2 года назад

Valeeeeeeu, muito bom!!!!

@alura 2 года назад

Que bom que gostou, Luiz!!! 💙

@ricardopatta 3 года назад

Procurei mas não achei o nome da prof. Quero ver mais aulas com ela! Muito boa didática mesmo. Parabéns pra ela!

@alura 3 года назад

Oi, Ricardo! É a Juliana Amoasei, o perfil dela na plataforma: cursos.alura.com.br/user/juliana-amoasei 😉

@morganaborges9255 3 года назад

Nossa, salvou minha vida. Assisti ontem, vi hoje de novo pra implementar e deu super certo. Muuito obrigada

@alura 3 года назад

Ficamos felizes por saber que pudemos te ajudar, Morgana! Conte sempre com a gente! 😉

@GuuCN 3 года назад

Finalmente aprendi :D

@jocelinnunes1264 2 года назад

show!

@Yo-gs3rm 3 года назад

Show 👏👏

@alura 3 года назад

Valeu, Patrícia! 💙

@AlesaGillespie 2 года назад

Uma vez que você entenda o que é main-axis e cross-axis, flexbox fica muito mais fácil de entender e visualizar na sua mente.

@denysaquino6931 3 года назад

Muito show

@alura 3 года назад

Valeu, Denis! 💙

@marciooliveira6176 3 года назад

Muito bom moça, parabens!

@alura 3 года назад

Valeu, Marcio! 💙

@jogandocomdigamer 3 года назад

to cursando ads mas ta dificil aprender no meu tecnologo ,faço aula a distância e os preofessores parecem um robo lendo um texto,gostei da sua didatica espero que vc continue ensinando voçê é muito boa nisso.

@alura 3 года назад

Ela continua sim! Tem mais conteúdos com a Ju aqui no canal, espero que te ajudem 💙

@matheusalff 3 года назад

otima professora

@alura 3 года назад

Valeu pelo carinho, Matheus! 💙

@un9286 3 года назад

Parabens e Obrigado pelo video. Eu tenho uma pequena pergunta: se eu colocar conteudo que seja maior que o flex-container (digamos uma imagem), o conteudo se ajusta sozinho, ou eu que teria que ajustar o tamanho dele?

@vitvitvitvitvitvitvitvit 3 года назад

eu fiz isso lkklk. Eu tive que alterar o tamanho da imagem p deixar igual ao do container, acho que é mais fácil usar um tamanho já definido anteriormente

@danilovictor1 2 года назад

👏👏👏👏👏👏

@reginaldojaccosantidade4364 3 года назад

Excelente vídeo. Bah vlw

@alura 3 года назад

Obrigada pelo carinho, Reginaldo! 💙

@olivertecnologia 3 года назад

A melhor e mais completa explicação que já assisti. Excelente.

@alura 3 года назад

Valeu, Oliver! Ficamos felizes por saber que você gostou da explicação! 💙

@DanielRodrigues-qu4fm 2 года назад

Gostei da abertura do curso em video.kkkk

@ronaldomarques8961 3 года назад

👏🏼👏🏼👏🏼

@alura 3 года назад

💙💙💙

@guilhermealexander4855 3 года назад

qual developertools vc está usando ??

@khall_archives 3 года назад

"CSS FlexBox: Dicas para começar" tem mais pra aprender? essa doeu ksksks

@valberjunior2109 3 года назад

Aula muito boa, só faltou aparecer a parte do header, vi que ela fez um navbar , e não deu pra ver qual o display e o alinhamento que usou no header. fiz meu header assim: .header{ max-width: 100%; background-color: black; color:white; overflow: hidden; padding:20px; display: flex; align-items: center; } h1{ margin-left:3%; } .navbar{ width: 100%; display:inline-flex; list-style:none; justify-content: flex-end; align-items: center; margin-right:3%; } li{ margin:2%; }

@ruban6042 3 года назад

Excelente aula!Qual o nome da ferramente de Desenvolvimento que ela utiliza no vídeo!?

@alura 3 года назад

Visual Studio Code e o Flexbox. 🙂

@esclevi 2 года назад

Uma pergunta, pode ser até estranho, mas, eu posso mixar o elemento pai "Flex-Container" com elemento de propriedades display =>block , ou só devo utilizar flex , pois acho um pouco limitante a nível de layout mais complexos, eu sou muito de usar o float. Então ,o que me sugere? Ótimo video.

@CarlosChagasOficial 3 года назад

Bacana o vídeo muito agradável adorei achei muito 🌷🔔🕭bom mesmo e vocês o que acharam !?!?!?!?

@alura 3 года назад

Que bom que curtiu o vídeo! 💙

@fabianoaraujodecarvalho1967 3 года назад

Adorei o seu trabalho, deveria montar uma curso

@alura 3 года назад

Oi Fabiano! Agradecemos pelo carinho. Na verdade, a Juliana Amoasei é nossa instrutora e ministra alguns cursos na nossa plataforma. Segue o link de alguns deles, caso queira dar uma conferida: 😉 www.alura.com.br/curso-online-bootstrap-landing-page www.alura.com.br/curso-online-graphql-construindo-api-apollo-server www.alura.com.br/curso-online-orm-nodejs-api-sequelize-mysql www.alura.com.br/curso-online-svg-css-animacao

@jheneferbrito3054 3 года назад

1u732 po87pop

@senhorpesadelo8137 2 года назад

Oi Juliana, gostei da sua didática parabéns, mas o Flex Box veio para substituir o position e o float então ?

@alura 2 года назад

Oi, que bacana que você curtiu o nosso vídeo 💙 Sobre a sua questão, é algo bem comentado em algumas redes mesmo. O que concluímos é que cada um tem seu caso de uso, o flexbox é muito bom pra fazer as questões de posicionamento nos layouts mas as vezes não é o mais recomendado seguindo as boas práticas, como no caso de sobrepor elementos (nesse caso o position é mais adequado) e por aí vai... Temos um artigo legal sobre o tema pra recomendar: blog.caelum.com.br/o-drama-do-posicionamento-de-elementos-na-tela-e-o-flexbox/amp/

@augustomatos4168 3 года назад

Tem como por um contêiner dentro de outro como o card???

@italomachado4903 2 года назад

A vida inteira achei que a musica da vinheta era do Guanabara kkk

@CarlosChagasOficial 3 года назад

🌍👏🔔

@alura 3 года назад

💙

@asaventurasdearthurito4036 3 года назад

Porquê no flex-container foi utilizado o '100vw' e no flex-item :45%', o porque de usar 'vw' em um e no outro '%'?

@kraddiei 2 года назад

Pois o conteiner vai ocupar uma área igual ao tamanho inteiro da tela do user, e o item irá ocupar 45% do valor de seu container *pai*.

@AustadGamer 2 года назад

Musiquinha de intro q o Guanabara usa, quem também notou?

@1NathanMendes 2 года назад

mds kkkk pera kk em 3:00 q magia é essa pra escrever em varios lugares ao mesmo tempo? kkkk me passa essa informação pfv. E essa janelinha pequena pra escrever e poder ver o site grande. Isso é no vs code tbm?

@matheusalff 3 года назад

qual o nome da professora? tentar achar cursos e videos dela

@alura 3 года назад

Essa é a Juliana Amoasei, nossa instrutora aqui da Alura! 🙂