🎨CSS Flexbox allows easy creation of flexible layouts for web pages.
➡️The flex-direction property determines the direction of the flex items.
🔀The flex-wrap property controls whether flex items should wrap to multiple lines.
🔛The justify-content property is used to align flex items horizontally within the flex container.
🔝The align-items property is used to align flex items vertically within the flex container.
What is CSS Flexbox?
—CSS Flexbox is a layout module that allows easy creation of flexible layouts for web pages.
What is the flex-direction property?
—The flex-direction property determines the direction of the flex items within the flex container.
What is the flex-wrap property?
—The flex-wrap property controls whether flex items should wrap to multiple lines when there is not enough space.
What is the justify-content property used for?
—The justify-content property is used to align flex items horizontally within the flex container.
What is the align-items property used for?
—The align-items property is used to align flex items vertically within the flex container.
00:00[Music]
hello and welcome hi i'm dave this tutorial is part of a beginner css series i'll be using the chrome web browser the visual studio code editor and the live server extension for visual studio code to view the web page
00:25let's move on to css flexbox fundamentals we'll be learning the css properties that you'll use most frequently when working with flexbox
02:28we're starting out by bringing in the roboto font from google fonts and we have some basic css styles for the body element including a min-height of 100 viewport units and padding to push down the main container
03:35the main container has a max width of 800 pixels and a minimum height of 400 pixels with margin set to auto to center it horizontally
05:43we can use the justify-content property to align the flex items horizontally within the flex container
06:52we can use the align-items property to align the flex items vertically within the flex container
09:18the flex-wrap property controls whether flex items should wrap to multiple lines when there is not enough space
10:50the align-content property aligns the rows in the flex container when there is extra space
