CSS Flexbox Intro | Flex CSS Tutorial for Beginners

Показать описание

In this CSS Flexbox introduction, we will explore the CSS flex properties you will frequently use with flexbox. This is a CSS tutorial for beginners with flexbox and is part of a CSS for Beginners playlist.

🚀 This lesson is part of a CSS for Beginners tutorial series playlist:

Intro to CSS Flexbox | Flex CSS Tutorial for Beginners

(00:00) Intro
(00:05) Welcome
(00:26) Setup & Starter Code Review
(02:28) display: flex
(03:23) justify-content
(05:22) align-items
(06:37) flex-direction changes everything
(08:40) Reversing the rows and columns
(09:04) flex-wrap
(10:20) flex-flow shorthand
(11:30) align-content
(12:46) Flex items can also be flex containers
(14:01) flex-basis
(15:24) flex-grow
(17:02) flex-shrink
(19:11) flex shorthand
(20:49) order property
(23:28) Practice with Flexbox Froggy

🕹️ Learning Games:

⚙ Web Dev Tools:

📚 References:

📚 Typography Resources:

📚 Color Resources:

✅ Follow Me:

Was this tutorial about CSS Flexbox for Beginners helpful? If so, please share. Let me know your thoughts in the comments.

#css #flexbox #flex

Рекомендации по теме

Комментарии

Dave you have a true gift for teaching. I was already pretty good with CSS, but watched this playlist anyway and I gotta say, I learned a lot more and was able to sure up a lot of my knowledge that was lacking in certain areas. This playlist was literally full of "aha" moments for me.

Thank you!

I think at the end of last year I predicted 100k subscribers for you by the end of 2022 and it's looking like you're well on track for that, congrats on all the hard work my friend!

johnmcaulay

Phew this is a dense subject. Better get a notebook and take some notes to help assimilate the content. Anyway, your teaching makes it much easier to understand the topic. Thank you Dave!

GabrielSouza-yyrq

Flexbox Froggy was such a good way to test the concepts!

yatin

This was helpful and succinct as well, thank you so much!

thp

Thank you Dave! That's where things are getting more complicated.. and that Froggy adds some fun to the learning process - great advice at the end of the video to play for practice!

Grihlo

Hi Dave, I feel like this one went a bit too quickly, I feel like there are some nuances which I might have missed if it was my first time learning about this concept. Thanks again.

andromilk

Dave, thanks a lot for this wonderful tutorial, I have learned a lot from you.

ilijajovanov

Another top-end tutorial. Your teaching skill is really good, Dave. Thanks a lot.

David-ekye

Thank you for the great explanation and also thank you for recommending flexbox froggy, really fun!

reitei

This is a very great tut for a reminder ( but not too beginner friendly imo).

jipeejoce

<html DAVEGRAY!>
<title> I LOVE YOU </title>
<style>
.teaching-skill { 100%, auto};
#knowledge {100px, 100px};
</style>
<body> <h1> Lots of LOVE from India👌❤️</h1> </body>
</html>

uniquebanda

Hi Dave, I got one problem regarding align-content and align-items, I have written same code till 12:36 timeline. But instead of writing align-content: space-evenly I have used align-content: flex-start. it is working fine when flex-items are wrapped in multiple lines on change size but when flex items are not wrapped in multiple line, even then align-content: flex-start is overriding the align-items: center property. Could you just tell me why this is happening.

vishaldeswal

Not sure whether or not there will be a part2, if not maybe it worth mentioning that we also have some useful properties such as justify-self/align-self
Thanks Dave,

ahmad-murery

hi. I still can't find the 14th lesson in the github...
And, will you teach about css link svg?(url(svg link)....), thank you

bnmbnm

Hi Dave, Before applying Flex when we set the box class width and height then when I change the height to 50px then its change as it should but in min-width doesn't effect the container, width always occupy all space in container either min-width is 100px or 50px. We are not providing min-width:100% to occupy all space in container horizontally then why all container becomes dark horizontally.
Expecting response,
Thank you.

IramKahkashan

Its hardly understand for me flex box from your video. Could you modify flex box concept for beginner. But thanks for share you knowledge for these concepts

jctueld

hey!
can you please check out CSS playlist u added something by mistake into your css playlist.

TejaDurgi

Hi Dave, hopefully everything fine. I am trying your flexbox awesome tutorial. Please tell me one thin when reduce the screen dimension at very very small my div stop to shrink and overflow the container, how can I resolve it?
Expecting response.

iramimran

CSS Flexbox Intro | Flex CSS Tutorial for Beginners

CSS Flexbox Intro | Flex CSS Tutorial for Beginners

CSS Flexbox in 100 Seconds

Learn Flexbox CSS in 8 minutes

Intro to CSS Flexbox - Flex Direction

Intro to CSS Flexbox - Flex Wrap

Learn CSS flexbox in 10 minutes! 💪

24 Intro to CSS flexbox

CSS Flexbox Tutorial for beginners

CSS Tutorial: CSS Flexbox Tutorial | Flexbox in CSS | CSS full course for beginners | Class 49

Introduction to What The FlexBox?!

Learn CSS Flexbox in 20 Minutes (Course)

CSS Flexbox Tutorial #1 - Introduction

Learn Flexbox in 15 Minutes

Flexbox Tutorial - 1 - Introduction

CSS Flexbox Tutorial | Create Layouts Using CSS | Flexbox Tutorial | Learn HTML and CSS

Introduction to Flexbox! - Tutorial 2 of 20 💪

Intro and Flexbox Basics — Learn CSS3 Flexbox (1/6)

Responsive Flexbox Layout Page in 4 Minutes | Flexbox Tutorial

Intro to CSS Flexbox - What is CSS Flexbox

The complete guide to CSS Flexbox

Learn flexbox the easy way

Intro to CSS Flexbox Order

CSS Flexbox Tutorial #5 - Flex Wrap

6 Advanced Flexbox Features You Probably Don’t Know