Одну секунду
Что-то сучилось. Попробуйте еще раз.
Flexbox flex basis смотреть последние обновления за сегодня на .
Hey, in this CSS flexbox tutorial, we'll be taking a look at the flex-basis property, which sets the 'starting width' of your flex elements. - COURSE LINKS: + Source files on GitHub - 🤍 + Brackets editor - 🤍 - You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage... SUBSCRIBE TO CHANNEL - 🤍 JavaScript for Beginners Playlist 🤍 CSS for Beginners Playlist = 🤍 The Net Ninja = For more front-end development tutorials & to black-belt your coding skills, head over to - 🤍 or 🤍 Social Links Twitter - 🤍TheNetNinja - 🤍
📘 Courses - 🤍 💖 Support UPI - 🤍 💖 Support PayPal - 🤍 💾 Github - 🤍 📱 Follow Codevolution + Twitter - 🤍 + Facebook - 🤍 📫 Business - codevolution.business🤍gmail.com Flexbox | CSS | Flexbox Tutorial | Flex basis
Get full control the size of your elements flex-grow, flex-shrink and flex-basis All videos + exercises → 🤍
In this tutorial, we look at how the "flex-basis" property works in CSS Flexbox. "flex-basis" determines the initial starting size of a child flex item before either flex-grow or flex-shrink have been applied to it. All flex items are given a default flex-basis value of "auto", which means their initial starting size is based either upon their "min-content" width, or an absolute width if already specified elsewhere in the CSS. "flex-basis" accepts any size value, such as pixels, relative units, or percentages. "flex-basis" can also be given a value of 0, which means the browser ignores a flex item's initial size when calculating how much space it should occupy inside its parent container, if re-sizing with either flex-grow or flex-shrink. All of the examples in this video use the default flex-direction of "row", however the principles remain the same when using a flex-direction of "column". Just be aware that the height of the flex items will be affected, rather than the width. I hope you found this video helpful. If you have any questions, please leave them in the comments below and I'll do my best to answer as soon as possible. TIMESTAMPS: 00:00 Introduction 00:24 What is flex-basis? 00:51 Understanding flex-grow 02:09 Understanding flex-shrink 03:32 The default flex-basis value of "auto" 05:00 Setting a flex-basis value other than "auto" 06:42 Using individual flex-basis values on individual flex items 08:54 Using a flex-basis value of "0" 10:53 Working with "flex-direction: column" 11:21 Summary WATCH NEXT: • CSS Flex Direction (flex-direction) Explained - 🤍 • How to Perfectly Center an Element using CSS Flexbox - 🤍 • How to Create a Sticky Footer using CSS Flexbox - 🤍
🎓 Dive even deeper with my 4-hour long flexbox course: 🤍 Flex-basis is one of those things that people sort of, kind of, maybe understand what it does, and I often see some bad advice, like “flex-basis” is just width for flexbox, when that can actually lead to some unintended consequences, so in this video I break down what flex-basis is, and how it’s different from width and height, even though it influences them. 🔗 Links ✅ The code from this video: 🤍 ⌚ Timestamps 00:00 - Introduction 00:49 - What happens when we declare display: flex 01:55 - Adding width to a flex-item 02:40 - Comparing width to flex-basis 03:55 - When we change the flex-direction 06:05 - When min- and max- come into play 07:35 - When we take advantage of flex-basis without realizing it #css Come hang out with other dev's in my Discord Community 💬 🤍 Keep up to date with everything I'm up to ✉ 🤍 Come hang out with me live every Monday on Twitch! 📺 🤍 - Help support my channel 👨🎓 Get a course: 🤍 👕 Buy a shirt: 🤍 💖 Support me on Patreon: 🤍 - My editor: VS Code - 🤍 - I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Twitter: 🤍 Codepen: 🤍 Github: 🤍 - And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
You probably use flexbox every time you write CSS, but you probably don’t know all the advanced features of flexbox. In this video I will be covering 6 of the most important flexbox features that you have probably never used, but you should definitely know. 🌎 Find Me Here: My Blog: 🤍 My Courses: 🤍 Patreon: 🤍 Twitter: 🤍 Discord: 🤍 GitHub: 🤍 CodePen: 🤍 ⏱️ Timestamps: 00:00 - Introduction 00:50 - Gap 02:04 - Writing Direction 04:23 - Align Content 06:15 - Flex Shorthand 08:49 - Flex Basis 13:16 - Auto Margins #Flexbox #WDS #CSS
flex-basis - CSS FlexBox - Aula 09 Na aula de hoje do curso de CSS FlexBox, vamos aprender sobre a propriedade flex-basis. Link deste vídeo: 🤍 Site do canal 🤍 Colabore com nosso canal: Qualquer valor usando o PIX: pixcfbcursos🤍gmail.com Página de cursos no site 🤍 e-mails: perguntas🤍cfbcursos.com.br canalfessorbruno🤍gmail.com Outros Links: Vídeo Colabore com nosso canal: 🤍 Canal youtube: 🤍 Instagram: instagram.com/cfbcursos ou 🤍cfbcursos Twitter: 🤍cfbcursos Facebook: 🤍facebook.com/canalfessorbruno Youtube: 🤍youtube.com/canalfessorbruno vakinhas 🤍 🤍 Produção: Bruno P. Campos / CFB Cursos Edição: Bruno P. Campos / CFB Cursos Licença padrão do YouTube #cfbcursos #css #cssgrid
В этом видео мы будем использовать комбинацию свойств flex grow, flex shrink и flex basis Файлы курса: 🤍 Плейлист Youtube: 🤍 Полная верся курса: 🤍 Мои Курсы: React для начинающих: 🤍 Все мои курсы (+ исходные файлы): 🤍 Подписывайся на соц сети: Telegram: 🤍 VK: 🤍 Instagram: 🤍 Мой блог о веб-разработке: 🤍
Привет! Сегодня разберем flex свойства, которые на первый взгляд очевидные, но когда начинаешь их применять, сидишь в шоке, что оно не работает, думаешь, это у них что-то не так, я то норм написал)) В общем разберем flex-grow, flex-shrink, flex-basis и будем их использовать верно и максимально точно. Телеграм канал: 🤍 Подробнее про flex: 🤍 Игра: 🤍 Подпишитесь на канал, если вам понравилось данное видео: 🤍
In this tutorial you will learn css flex-basis property in Hindi, Urdu.You can learn how to set the maximum width and minimum width of flex items in flex container by using new CSS3 property "flex-basis". CSS Flexbox Tutorial Course - Playlist 🤍 Follow us on Facebook 🤍 Follow us on Twitter 🤍 #css3 #csstutorial #cssflexbox #webdesigntutorial #css
flex / flex basis, flex grow и flex-shrink из модуля флексбокс / flexbox уроки Привет! Сегодня мы рассмотрим свойства flex-basis, flex-grow и flex-shrink из модуля flexbox, а так же их сокращённую запись - flex. После просмотра этого видео вы будете знать, как работает каждое из этих свойств, какие значения оно может принимать. верстка сайта состоит из блоков, которые должны сжиматься / расширятся, иногда обладают базовым размером. Раньше этого можно было добиться только с помощью процентов и нужно было вычислять отступы. С помощью отдельных свойств флексбокс можно настроить так, чтобы это делалось автоматически. flexbox уроки с подробным описанием всех свойств на канале! = Telegram Канал - 🤍 Чат - 🤍 = Подписывайтесь в соц. сетях: Facebook - 🤍 VKontakte - 🤍 LinkedIn - 🤍 Twitter - 🤍 Instagram - 🤍 = Мой второй канал: 🤍 = Привет, меня зовут Виталий Киренков, и я занимаюсь веб-разработкой с 2007 года. За это время я сверстал более 200 сайтов (как минимум, половина из них с JavaScript), разработал с коллегами 2 интернет-банка на React + Redux + Typescript. И на этом канале я делюсь своим опытом в части вёрстки, javascript, и делаю всякие полезные видео для новичков и не только. Больше информации обо мне: 🤍 #ityoutubersru
Nessa seria vamos aprender o flexbox module, como ele funciona, como podemos aplicar ele nos nosso projetos. Ja terminamos os flexbox-container, vamos começar a devorar o flexbox-items. flex-basis 🗄 Flexbox: 🤍 #flexbox #flexbasis Compartilhe: 🤍
Curso gratuito de Flexbox Nesse curso você vai aprender a posicionar elementos HTML com o módulo Flexbox do CSS3, você vai entender os eixos, o container (pai) e suas propriedades, e os items (filhos) e suas propriedades. O curso será composto por aulas teóricas, práticas, exercícios e no final teremos um projeto para colocar a prova o conhecimento adquirido. O curso possui as seguintes aulas: 1. Abertura e Avisos Importantes (Aula 00) 2. O Que é Flexbox ? (Aula 01) 3. Container e Items (Aula 02) 4. Eixo Principal e Eixo Transversal (Aula 03) 5. Eixos Principal e Transversal. Prática (Aula 04) 6. Main Start e Main End (Aula 05) 7. Main Size e Cross Size (Aula 06) 8. Display Flex (Aula 07) 9. Flex Direction (Aula 08) 10. Flex Wrap (Aula 09) 11. Flex Flow (Aula 10) 12. Justify Content (Aula 11) 13. Align Items (Aula 12) 14. Align Content (Aula 13) 15. Gap (Aula 14) 16. Order (Aula 15) 17. Flex Grow (Aula 16) 18. Flex Shrink (Aula 17) 19. Flex Basis (Aula 18) 20. Flex (Aulas 19) 21. Align Self (Aula 20) 22. Abertura Projeto Final (Aula 21) 23. Mostrando o Projeto (Aula 22) 24. Projeto final (Aula 23) ✅ Inscreva-se no canal e ative o sininho! ✅ Playlist do Curso Completo 🤍 ✅ Aulas Práticas, Exercícios e Projeto Final 🤍 ✅ Os Melhores Livros Para Programadores 🤍 ✅ Vídeos que vão te ajudar: Como personalizar seu perfil do Github: 🤍 Como se tornar um desenvolvedor frontend: 🤍 ✅ Me siga nas redes sociais: Insta: 🤍 Linkedin: 🤍 #flexbox #css #frontend #css3
The flex-grow, flex-shrink and flex-basis properties decide how the items grow and shrink with the width of the container. Once you've learned CSS Flexbox, you'll wonder how you ever managed to build websites without it. It gives you all the tools you needed in order to properly arrange content inside flexible containers. Given that all websites need to be flexible and responsive these days, Flexbox is a must-have skill for web developers. 💜 Play with this code on Scrimba: 🤍 💻 Check out Scrimba’s interactive learning platform: 🤍 🌲 Linktree: 🤍
#YauhenK #webDev #CSS #Flexbox #ityoutubersru В данном видеокурсе мы с вами рассмотрим технологию Flexbox. Flexible Box Layout Module (Flexbox) - представляет собой способ компоновки элементов, в основе лежит идея оси. Другими словами все элементы можно располагать вдоль основной и поперечной осей, или вертикально и горизонтально. Технология позволяет буквально в пару свойств создать гибкий лэйаут, или гибкие UI элементы. ✒ Репозиторий курса: ✔ GitHub: 🤍 ✒ Полный список готовых и планируемых курсов: ✔ Trello: 🤍 ✒ Автор курса: ✔ YouTube: 🤍 ✔ Instagram: 🤍 ✔ Twitter: 🤍 ✔ VK: 🤍 ✔ LinkedIn: 🤍 ✔ GitHub: 🤍 ✔ VK (Группа): 🤍 ✒ Поддержать развитие канала: ✔ YouTube-спонсорство: 🤍 ✔ Patreon: 🤍
Link do Repo GitHub 👉 🤍 Quer aprender mais sobre Frontend / Backend? - Conheça o Blog 👉 🤍 e veja a playlist do canal. - Material para download: 🤍 - Post Blog: 🤍 🚀 Blog e Curso - 🤍 - 🤍 📚 Livros - Html, Css e Js - 🤍 - HTML 5 - Embarque Imediato - 🤍 - Use a cabeça! Programação em HTML 5 - 🤍 - CSS3 - 🤍 - Use a cabeça! Programação JavaScript - 🤍 - Princípios de Orientação a Objetos em JavaScript - 🤍 ✅ KINDLE QUE EU TENHO - 🤍
In this episode, we practice our flexbox skills with a game, Flexbox Zombies! This game was super helpful and a fun way to learn the flexbox basics. It was also free! In this episode, we learn how to use flex-basis. My goal with this channel is to learn how to code, primarily using free resources. To play: 🤍
🔸توی این قسمت در مورد ویژگی flex-basis و ارتباطش با ویژگی های width و height واستون توضیح دادم 🔸پیج مخصوص دوره رو فالو کنید (اطلاع رسانی قسمت های جدید دوره) 🔸🤍
¿Quieres aprender flexbox de la mejor forma posible? 👇👇 ACCEDE al CURSO GRATIS 👇 Si quieres aprender más sobre flexbox aquí te dejo el curso gratis!👇 🤍 /*=Start=*/ 📋 Suscríbete a mi newsletter semanal con contenido exclusivo: 🤍 👨💻 Todos los cursos gratis: 🤍 📘 MI LIBRO "No todo es programar": 🤍 🦊 100 Fábulas para Programadores 🤍 📙 Libro: Aprende HTML 🤍 📹 Suscríbete al canal: 🤍 🎵 Koding Beats canal dedicado a música para escuchar mientras programas: 🤍 🤍 😘 Únete como miembro del canal: 🤍 🌐 ¡Crea una página web sin programar! 🤍 👁️ Puedes encontrar cosas más interesantes en: 🤍 🖱️ Si quieres ver el mi setup completo 👉 🤍 🎉 Continua la fiesta en mis otras redes sociales: Discord: 🤍 Instagram: 🤍 TikTok: 🤍 GitHub: 🤍 🤍 Algunos de los enlaces son enlaces de afiliados, por lo que quizás reciba alguna pequeña comisión por compras a través de esos enlaces. /*=End=*/
A look at three closely related CSS Flexbox properties: flex-basis, flex-grow, and flex-shrink. We start out by looking at how CSS flex-basis differs from width. We then look at how flex-grow and flex-shrink make usage of extra available flex-container space or too little flex-container space. Created by Gregg Fine. Download my FREE "Google Search Secrets for Developers" Cheat Sheet: 🤍 🗣JOIN the Code Creative Facebook group! : 🤍 🔴Subscribe for more free Code Creative videos: : 🤍 🌐 The Code Creative Official Website 🤍 🎓 The Code Creative Courses 🤍 ✅ Recommended related videos: Debouncing Explained 🤍 Memoization Explained 🤍 Sorting in JavaScript Explained 🤍 ✅ For business inquiries contact me at gregg🤍greggfinedev.com ✅ Let's connect: Twitter - 🤍GreggFine Instagram - /greggfinedev Facebook - /hiddentigermusic
В данном видео я дам объяснение работы свойств flex-basis, flex-grow и flex-shrink. Во многих учебниках и справочниках эти свойства описаны неправильно, из-за чего при попытке воспользоваться ими в браузере получается совсем не тот результат, который был ожидаем. Объяснение правильной работы в видео! Автор видео: Трепачёв Д.П. Больше уроков вы найдете на сайте code.mu
In this video we will see about the flex basis CSS property. Compare with max-width vs min-width vs flex-basis in Flexbox - CSS3 If you like my video, please subscribe to my channel. Join in the Telegram Group 🤍 My Playlists: React Complete Course: 🤍 Vue Complete Course: 🤍 Angular NGRX Complete Course: 🤍 Angular Complete Course: 🤍 TypeScript Complete Course: 🤍 ES6 Complete Course: 🤍 Javascript Complete Course: 🤍 GIT Complete Course: 🤍 ESLint Complete Course: 🤍 RxJS Complete Course: 🤍 Declarative Reactive Programming in Angular Complete Course: 🤍 Angular CLI Complete Course Tutorial: 🤍 Angular UnitTesting Complete Course: 🤍 My Courses Playlist Page: 🤍 Youtube Page: 🤍 Facebook Page: 🤍 Twitter Page: 🤍 Linkedin: 🤍 GitHub: 🤍 #CSS #CSS3 #leelawebdev Join this channel to get access to perks: 🤍
Discord - 🤍 Codepen for this project - 🤍 During the CSS stone-age developers were creating layouts with floats and positioning until one fateful day Flexbox would be introduced and the world would never be the same. 0:00 Intro 0:11 display flex 0:39 flex-direction 1:05 justify-content 1:41 align-items 2:22 key concept 3:12 flex-wrap 3:36 align-content 4:08 gap 4:20 flex-grow 5:19 flex-shrink 5:44 flex-basis 6:14 flex shorthand 6:43 align-self 7:17 order
Saiba para o que servem as propriedades CSS flex-basis & flex de Flexbox e como ela ajuda a desenvolver layouts para a Web. ✔️ Playlist do curso completo de Flexbox: 🤍 Assine o canal! 🤍 - Facebook: 🤍 - Instagram: 🤍 - Twitter: 🤍 Conheça o blog desenvolvimento para web: 🤍
Set an flex-basis width or height and have items wrap and stretch automatically. All videos + exercises → 🤍
В данном видео я разберу как работают свойства flex-basis, flex-grow и flex-shrink. Мало материала на русском языке о том как эти свойства работают. Давайте разбираться! flex, flex basis, flex grow и flex-shrink Автор - Максим Лескин 🤍 - видео про flex gap 👀 Подписаться на канал: 🤍 🌍 Наш сайт: 🤍 😃 ВКонтакте: 🤍 📷 Instagram: 🤍 #methed #css #flexbox
Article on CSS-Tricks: 🤍 Flex is a little strange in how it works, and I only recently dove deep enough into it to really understand what was going on, so I figured I'd share my discoveries with you! 🎓 - I have a 4+ hour course that focuses only on understanding and using Flexbox: 🤍 🔗 Links ✅ 🤍 ✅ 🤍 ✅ 🤍 ✅ 🤍 ✅ 🤍 ⌚ Timestamps 00:00 - Introduction 02:15 - How flexbox calculates the size of elements 06:10 - How flex-shrink calculates how much to shrink by 11:24 - How flex-grow calculates the size to grow by 12:00 - What flex: 1 actually does 13:09 - Why flex: 1 on all the flex items doesn't make even columns all the time 16:16 - Why flex-basis: 100% doesn't have the same result as flex: 1 17:23 - My new preferred solution 20:00 - A solution using flexbox 21:26 - Flexbox vs Grid #css Come hang out with other dev's in my Discord Community 💬 🤍 Keep up to date with everything I'm up to ✉ 🤍 Come hang out with me live every Monday on Twitch! 📺 🤍 - Help support my channel 👨🎓 Get a course: 🤍 👕 Buy a shirt: 🤍 💖 Support me on Patreon: 🤍 - My editor: VS Code - 🤍 - I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Twitter: 🤍 Codepen: 🤍 Github: 🤍 - And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Get your cheatsheet: 🤍 Want to learn more about flexbox? 🤍 Flexbox is amazing, and I honestly feel like sometimes we're just stratching the surface with what we can do with it! In this video I explore three design patterns that you can use in your sites using flexbox. In-depth gap video (including alternative for Safari): 🤍 /// Timestamps 00:00 - Introduction 00:19 - even columns 04:31 - grid-ish 08:13 - content and sidebar 12:45 - spacing things out #css #flexbox Come hang out with other dev's in my Discord Community 💬 🤍 - Keep up to date with everything I'm up to ✉ 🤍 - Help support my channel 👨🎓 Get a course: 🤍 👕 Buy a shirt: 🤍 💖 Support me on Patreon: 🤍 - My editor: VS Code - 🤍 - I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter. Instagram: 🤍 Twitter: 🤍 Codepen: 🤍 Github: 🤍 - And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Flexbox Tipps in deutsch. Das Zusammenspiel der Eigenschaften flex-basis, flex-shrink, flex-grow und flex-wrap. Weitere Tipps: 🤍 Flexbox Teil 1: 🤍
🔸توی این قسمت در سه تا پراپرتی flex-grow و flex-shrink و flex-basis رو با ذکر یه مثال جمع بندی کردم واستون 🔸پیج مخصوص دوره رو فالو کنید (اطلاع رسانی قسمت های جدید دوره) 🔸🤍
Flex Box Child - Flex Basis, Flex Shorthand Code & Notice: 🤍 Assignments: 🤍 = Support Me on Patreon to Help me Create More Videos 🤍 I will be Very Happy if you Support my Channel. 🤍 Join Our Facebook Group: 🤍 Follow My Facebook Profile: 🤍 Like Facebook Page: 🤍 Follow Me On Twitter: 🤍
En esta segunda parte de la Guia Definitiva de Flexbox aprenderemos como funcionan las cajas flexibles, cuyos tamaños pueden crecer o encogerse según ciertos parámetros. Visítanos en nuestra página web 🤍l Síguenos en Facebook: 🤍l/facebook Síguenos en Twitter: 🤍l/twitter Únete a la comunidad Escuela Digital en Facebook: 🤍l/comunidad
If you're a web developer looking to create flexible, responsive layouts, you're likely already familiar with Flexbox. But have you explored the potential of "flex-basis"? In this video, we'll dive into the world of "flex-basis" and explore how it can help you create layouts that are both visually appealing and adaptable to a range of screen sizes and devices. We'll cover: What "flex-basis" does and how it works in the context of Flexbox How to use "flex-basis" to control the initial size of flex items in a container Examples of how "flex-basis" can be used to create visually interesting and responsive designs in a variety of contexts Whether you're a beginner or an experienced web developer, understanding how "flex-basis" works is essential for creating layouts that are both flexible and attractive. So join us as we explore the power of "flex-basis" and unlock new possibilities for your web development projects.
شرح العلاقة بين flex flow و flex basis
Как работает свойство flex-basis в css3. Обучающее видео для начинающих верстальщиков. display: flex-basis - Простое обьяснение для новичков. #css #html #javascript #coding #programming #webdesign #code #developer #programmer #webdeveloper #flex-basis
In this section we will be exploring the three flexbox properties that are applied to flex items, which enable us to control the size and flexibility of the items along the main axis — flex-grow, flex-shrink, and flex-basis. Fully understanding how these properties work with growing and shrinking items is the real key to mastering flexbox. The flex-grow, flex-shrink and flex-basis properties enable us to control the size and flexibility of the flex items along the main axis. #css #flexbox
Bu videoda ana eksen üzerinde dizilmiş elemanlara özel boyutlar vermek için kullanabileceğiniz flex basis özelliğini öğreneceksiniz. Github Profilim 🤍 LinkedIn Profilim 🤍 CodePen Profilim 🤍 E-Posta mertozensoru🤍gmail.com HTML&CSS&JS Oynatma Listesi 🤍 Flexbox Oynatma Listesi 🤍 Javascript Kesitleri 🤍 JQuery Oynatma Listesi 🤍 Tek Video Serisi 🤍 Diğer Videolar 🤍 #html #css #javascript #frontend
In this lesson, we'll attempt to learn how to use the flex-grow, flex-shrink and flex-basis properties in Flexbox. CodePen here: 🤍 If you liked this lesson, watch my the other Flexbox lessons or join my Ultimate Web Designer & Developer course on Udemy: 🤍 Or access all of my web design & development courses at 🤍
#css #html #flexbox
.svg){kind=small}
![[ Curso de FlexBox ] - Flex Basis](https://i.ytimg.com/vi/au4Haie6WlA/mqdefault.jpg "[ Curso de FlexBox ] - Flex Basis")
![💙 ¿Qué es FLEX BASIS? (+ejemplo práctico!) [flexbox css]](https://i.ytimg.com/vi/58yQEp_fdSA/mqdefault.jpg "💙 ¿Qué es FLEX BASIS? (+ejemplo práctico!) [flexbox css]")
