title
CSS Flexbox Tutorial for Beginners | Basics & Container | 1/2

description
Responsive design is more important than ever as we want to ensure that our website looks awesome on all devices. With Flexbox we can make our Elements more dynamic, so let's find out how this works in this tutorial! ---------- Join the full 22h+ course: https://acad.link/css Source Code: https://github.com/academind/understanding-css/tree/02-flexbox-container Flexbox on the MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ---------- • You can follow Max on Twitter (@maxedapps). • You can also find us on Facebook.(https://www.facebook.com/academindchannel/) • Or visit our Website (https://www.academind.com) and subscribe to our newsletter! See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

detail
{'title': 'CSS Flexbox Tutorial for Beginners | Basics & Container | 1/2', 'heatmap': [{'end': 1676.132, 'start': 1645.22, 'weight': 1}], 'summary': "The tutorial covers the flexbox layout module, explaining its use for responsive website design across devices, core concepts of 'display: flex', css styling with flexbox, flexbox properties and behavior, flexbox alignment concepts, and css flexbox properties for item alignment and website layout control, with emphasis on practical application and mdn as a learning resource.", 'chapters': [{'end': 43.633, 'segs': [{'end': 43.633, 'src': 'embed', 'start': 1.581, 'weight': 0, 'content': [{'end': 3.982, 'text': 'hello and welcome back to the series.', 'start': 1.581, 'duration': 2.401}, {'end': 7.843, 'text': 'in this and the next video we will have a look at flexbox.', 'start': 3.982, 'duration': 3.861}, {'end': 15.705, 'text': 'flexbox stands for flexible box layout module not the best name, maybe, but flexbox is really awesome,', 'start': 7.843, 'duration': 7.862}, {'end': 24.667, 'text': 'because flexbox allows us to display our elements on our website more dynamically or more flexible, And this is really important,', 'start': 15.705, 'duration': 8.962}, {'end': 32.65, 'text': 'especially nowadays when we have all these different devices which we want to use to access our websites, like laptops, tablets,', 'start': 24.667, 'duration': 7.983}, {'end': 33.87, 'text': 'smartphones and so on.', 'start': 32.65, 'duration': 1.22}, {'end': 37.851, 'text': 'And because of that, we need a responsive website.', 'start': 34.49, 'duration': 3.361}, {'end': 40.512, 'text': 'And this is what we can do with Flexbox.', 'start': 38.191, 'duration': 2.321}, {'end': 43.633, 'text': "So let's have a look at that in this and the next video.", 'start': 41.012, 'duration': 2.621}], 'summary': 'Flexbox allows dynamic and responsive website layout, suitable for various devices.', 'duration': 42.052, 'max_score': 1.581, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY1581.jpg'}], 'start': 1.581, 'title': 'Flexbox layout module', 'summary': 'Introduces the flexible box layout module, also known as flexbox, enabling dynamic and responsive website design for different devices, such as laptops, tablets, and smartphones.', 'chapters': [{'end': 43.633, 'start': 1.581, 'title': 'Flexbox layout module', 'summary': 'Introduces the flexible box layout module, also known as flexbox, which enables dynamic and responsive website design for different devices, such as laptops, tablets, and smartphones.', 'duration': 42.052, 'highlights': ['Flexbox allows for dynamic and flexible display of elements on websites, catering to the needs of different devices like laptops, tablets, and smartphones.', 'Flexbox enables the creation of responsive websites, which is crucial in the current era of diverse device usage.', 'The series will delve into flexbox in the upcoming videos, emphasizing its importance and practical applications.']}], 'duration': 42.052, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY1581.jpg', 'highlights': ['Flexbox enables the creation of responsive websites, crucial for diverse device usage.', 'Flexbox allows for dynamic and flexible display of elements on websites for different devices.', 'The series will delve into flexbox in upcoming videos, emphasizing its importance and practical applications.']}, {'end': 223.885, 'segs': [{'end': 163.52, 'src': 'embed', 'start': 91.652, 'weight': 0, 'content': [{'end': 101.423, 'text': 'well, and as the name says, a container normally contains something, and this something are the children or the so-called flex items.', 'start': 91.652, 'duration': 9.771}, {'end': 106.531, 'text': "And that's the important core concept of Flexbox that you have to understand,", 'start': 101.944, 'duration': 4.587}, {'end': 112.078, 'text': 'because you always add display flex to your parent element or kind of the wrapping element.', 'start': 106.531, 'duration': 5.547}, {'end': 118.643, 'text': 'And by that, you turn this parent or as I said, this wrapping element into the flex container.', 'start': 112.879, 'duration': 5.764}, {'end': 123.166, 'text': 'And inside this container, you then have all these different flex items.', 'start': 119.383, 'duration': 3.783}, {'end': 129.669, 'text': 'So the flex items are basically nested elements into this or inside of this parent element.', 'start': 123.386, 'duration': 6.283}, {'end': 131.331, 'text': "So that's important to keep in mind.", 'start': 130.15, 'duration': 1.181}, {'end': 135.994, 'text': 'Now, as soon as we get this, we can add more properties to our flex container.', 'start': 131.772, 'duration': 4.222}, {'end': 141.118, 'text': 'This could be flex flow, justify content, align content, or align items.', 'start': 136.314, 'duration': 4.804}, {'end': 145.523, 'text': 'We can of course also add more properties to our flex items.', 'start': 141.778, 'duration': 3.745}, {'end': 155.914, 'text': "These properties can be order, flex or align self, and now, at this point it's probably confusing.", 'start': 145.743, 'duration': 10.171}, {'end': 158.396, 'text': "therefore, let's forget about that for a second.", 'start': 155.914, 'duration': 2.482}, {'end': 163.52, 'text': 'so about these properties for the flex items and talk about these in the next video.', 'start': 158.396, 'duration': 5.124}], 'summary': 'Flexbox is a layout model that turns a parent element into a flex container and contains flex items, with additional properties for both container and items.', 'duration': 71.868, 'max_score': 91.652, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY91652.jpg'}], 'start': 47.498, 'title': 'Understanding flexbox theory', 'summary': "Explains the core concept of flexbox, focusing on the use of 'display: flex' to turn an element into a flex container and the properties that can be added to the flex container and flex items for layout control.", 'chapters': [{'end': 223.885, 'start': 47.498, 'title': 'Understanding flexbox theory', 'summary': "Explains the core concept of flexbox, focusing on the use of 'display: flex' to turn an element into a flex container and the properties that can be added to the flex container and flex items for layout control.", 'duration': 176.387, 'highlights': ["The core concept of Flexbox is to add 'display: flex' to a parent element, turning it into a flex container, and then add properties like flex flow, justify content, align content, or align items to the flex container for layout control. By adding 'display: flex' to a parent element, it becomes a flex container, allowing the addition of properties like flex flow, justify content, align content, or align items for layout control.", 'Flex items are nested elements inside the flex container, and additional properties like order, flex, or align self can be added to flex items for further control over their layout. Flex items are nested elements inside the flex container, and additional properties like order, flex, or align self can be added to flex items for further control over their layout.', 'The chapter also mentions the focus on properties that can be added to the parent class, such as flex flow, justify content, align content, and align items for layout control. The chapter also mentions the focus on properties that can be added to the parent class, such as flex flow, justify content, align content, and align items for layout control.']}], 'duration': 176.387, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY47498.jpg', 'highlights': ["The core concept of Flexbox is to add 'display: flex' to a parent element, turning it into a flex container, and then add properties like flex flow, justify content, align content, or align items to the flex container for layout control.", 'Flex items are nested elements inside the flex container, and additional properties like order, flex, or align self can be added to flex items for further control over their layout.', 'The chapter also mentions the focus on properties that can be added to the parent class, such as flex flow, justify content, align content, and align items for layout control.']}, {'end': 555.556, 'segs': [{'end': 314.264, 'src': 'embed', 'start': 270.091, 'weight': 0, 'content': [{'end': 273.092, 'text': 'And div 5 and 6 only has a width of 200 pixels.', 'start': 270.091, 'duration': 3.001}, {'end': 275.713, 'text': "So that's our basic setup we will work with.", 'start': 273.512, 'duration': 2.201}, {'end': 280.374, 'text': 'But as I said, the focus will be right here in our parent or on our parent.', 'start': 275.873, 'duration': 4.501}, {'end': 284.835, 'text': 'Now, what does this look like on the website? Well, it looks like this basically.', 'start': 281.014, 'duration': 3.821}, {'end': 286.255, 'text': 'Here we have our six divs.', 'start': 285.095, 'duration': 1.16}, {'end': 291.657, 'text': 'And as you can see, the content of the div always indicates the height and width property.', 'start': 286.636, 'duration': 5.021}, {'end': 292.838, 'text': 'That was applied.', 'start': 292.037, 'duration': 0.801}, {'end': 294.901, 'text': "So that's the basic setup.", 'start': 293.84, 'duration': 1.061}, {'end': 298.726, 'text': "I think now it's time to go back to our code and have a look at Flexbox finally.", 'start': 295.181, 'duration': 3.545}, {'end': 310.961, 'text': "So, in the code we will add display flex right here to our parent element, and that's really important, although i'm repeating myself,", 'start': 299.406, 'duration': 11.555}, {'end': 314.264, 'text': 'but i want to make sure that you really see how this works.', 'start': 310.961, 'duration': 3.303}], 'summary': 'The divs have a width of 200 pixels, and display flex is added to the parent element for a better layout.', 'duration': 44.173, 'max_score': 270.091, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY270091.jpg'}, {'end': 435.558, 'src': 'embed', 'start': 389.712, 'weight': 3, 'content': [{'end': 393.833, 'text': 'Here we have still the initial value, so only the value or the width the content needs.', 'start': 389.712, 'duration': 4.121}, {'end': 395.794, 'text': 'Here we have 150.', 'start': 394.293, 'duration': 1.501}, {'end': 399.055, 'text': 'And here we have the same thing, just the width that the actual content needs.', 'start': 395.794, 'duration': 3.261}, {'end': 406.338, 'text': 'And also important, our parent, so our div with the class parent, is also behaving like a block level element.', 'start': 399.655, 'duration': 6.683}, {'end': 410.68, 'text': 'So it increases and decreases the size depending on our website width.', 'start': 406.538, 'duration': 4.142}, {'end': 415.243, 'text': "So that's what happens basically when we use display flags.", 'start': 411.36, 'duration': 3.883}, {'end': 420.587, 'text': "There is more that's happening right here, but we'll have a look at that step by step throughout this video.", 'start': 415.744, 'duration': 4.843}, {'end': 428.274, 'text': "So let's go back to the code now and change this value from display flags to display inline flags right here.", 'start': 421.128, 'duration': 7.146}, {'end': 432.397, 'text': 'If we save that and go back and reload the page.', 'start': 429.234, 'duration': 3.163}, {'end': 435.558, 'text': 'we can immediately see what happens to our parent.', 'start': 433.556, 'duration': 2.002}], 'summary': 'Transcript covers css properties, including width and display flags, with an example of 150 pixels and block level element behavior.', 'duration': 45.846, 'max_score': 389.712, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY389712.jpg'}, {'end': 565.121, 'src': 'embed', 'start': 531.344, 'weight': 1, 'content': [{'end': 535.569, 'text': 'And which properties are these actually? Well, let me comment this maybe right here.', 'start': 531.344, 'duration': 4.225}, {'end': 540.093, 'text': 'Row simply refers to the flex direction property.', 'start': 536.39, 'duration': 3.703}, {'end': 542.179, 'text': 'and no rep.', 'start': 541.118, 'duration': 1.061}, {'end': 545.844, 'text': 'so the second value refers to flex rep.', 'start': 542.179, 'duration': 3.665}, {'end': 548.787, 'text': 'well, kind of intuitive, actually like that.', 'start': 545.844, 'duration': 2.943}, {'end': 555.556, 'text': "as i said, you can also write these two properties separately, but i'll stick to flex flow because i think it's easier to use.", 'start': 548.787, 'duration': 6.769}, {'end': 565.121, 'text': 'however, if we save that and go back and reload our page, we can see that the behavior is exactly the way it was before, because, as i said,', 'start': 555.556, 'duration': 9.565}], 'summary': 'Explanation of flex direction and flex rep properties in css.', 'duration': 33.777, 'max_score': 531.344, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY531344.jpg'}], 'start': 223.885, 'title': 'Css styling with flexbox', 'summary': 'Introduces basic setup of a css file, focusing on using flexbox for styling six divs, and explains the behavior of div elements when using display flags and inline flags, showcasing the use of flexbox properties to change the behavior of flex items.', 'chapters': [{'end': 340.508, 'start': 223.885, 'title': 'Introduction to flexbox styling', 'summary': 'Introduces the basic setup of a css file, with a focus on using flexbox for styling six divs, including properties such as width, height, and display flex on the parent container.', 'duration': 116.623, 'highlights': ['The chapter introduces the basic setup of a CSS file, with a focus on using Flexbox for styling six divs, including properties such as width, height, and display flex on the parent container.', 'The CSS file demonstrates styling for six divs, with specific properties such as width and height applied to each div, providing a clear indication of how these properties affect the layout.', "The tutorial emphasizes the use of Flexbox by adding 'display flex' to the parent element, highlighting its significance in controlling the layout of nested divs."]}, {'end': 555.556, 'start': 341.128, 'title': 'Css display property and flexbox', 'summary': 'Explains the behavior of div elements when using display flags and inline flags, showcasing how the width of elements changes based on website width and the use of flexbox properties to change the behavior of flex items.', 'duration': 214.428, 'highlights': ['By using display flags, the div elements behave as block level elements, adjusting their width based on website width and content needs, with examples of widths such as 200 and 150, while the parent div also behaves as a block level element, all demonstrated when inspecting the elements.', 'When changing the value to display inline flags, the parent div behaves as an inline element, occupying only the required space to display the content, and the elements do not decrease their width when the website size is reduced, ultimately becoming hidden at smaller sizes.', 'Introducing the flexflow property as a combination of flex direction and flex wrap, providing the flexibility to change the behavior of flex items by setting values such as row and no wrap, simplifying the use of multiple flex properties.']}], 'duration': 331.671, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY223885.jpg', 'highlights': ["The tutorial emphasizes the use of Flexbox by adding 'display flex' to the parent element, highlighting its significance in controlling the layout of nested divs.", 'Introducing the flexflow property as a combination of flex direction and flex wrap, providing the flexibility to change the behavior of flex items by setting values such as row and no wrap, simplifying the use of multiple flex properties.', 'The CSS file demonstrates styling for six divs, with specific properties such as width and height applied to each div, providing a clear indication of how these properties affect the layout.', 'By using display flags, the div elements behave as block level elements, adjusting their width based on website width and content needs, with examples of widths such as 200 and 150, while the parent div also behaves as a block level element, all demonstrated when inspecting the elements.', 'When changing the value to display inline flags, the parent div behaves as an inline element, occupying only the required space to display the content, and the elements do not decrease their width when the website size is reduced, ultimately becoming hidden at smaller sizes.']}, {'end': 1310.126, 'segs': [{'end': 697.44, 'src': 'embed', 'start': 672.707, 'weight': 0, 'content': [{'end': 682.238, 'text': 'The main thing that changed now is that adding wrap as a value for the flex wrap property allows us to well let our items wrap.', 'start': 672.707, 'duration': 9.531}, {'end': 683.961, 'text': 'we also have another option right here.', 'start': 682.238, 'duration': 1.723}, {'end': 687.006, 'text': 'we can also use you can see it already wrap reverse.', 'start': 683.961, 'duration': 3.045}, {'end': 697.44, 'text': 'if we use that and go back and reload the page this we can see that if we now decrease the size, it wraps well reverse, as the name says.', 'start': 687.006, 'duration': 10.434}], 'summary': "Using 'wrap' as a value for the flex wrap property allows items to wrap, and 'wrap reverse' reverses the wrapping when decreasing the size.", 'duration': 24.733, 'max_score': 672.707, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY672707.jpg'}, {'end': 867.435, 'src': 'embed', 'start': 843.965, 'weight': 3, 'content': [{'end': 852.089, 'text': 'And there is also a really important aspect included into that, that you have to understand to make sure that you can use Flexbox correctly.', 'start': 843.965, 'duration': 8.124}, {'end': 858.153, 'text': "And because of that, it's now time to go back to theory again to understand what actually happened here.", 'start': 852.589, 'duration': 5.564}, {'end': 865.474, 'text': 'because the main thing you have to understand right here is main axis versus cross axis.', 'start': 859.113, 'duration': 6.361}, {'end': 867.435, 'text': 'and now it gets even more confusing.', 'start': 865.474, 'duration': 1.961}], 'summary': 'Understanding main axis vs. cross axis is crucial for using flexbox correctly.', 'duration': 23.47, 'max_score': 843.965, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY843965.jpg'}, {'end': 1233.206, 'src': 'embed', 'start': 1203.668, 'weight': 2, 'content': [{'end': 1214.572, 'text': 'And if we change it to column reverse right here that then you can see that it starts in the bottom left corner, as i showed you,', 'start': 1203.668, 'duration': 10.904}, {'end': 1216.754, 'text': 'and goes up to the top.', 'start': 1214.572, 'duration': 2.182}, {'end': 1222.278, 'text': "so that's basically this core concept behind the flex direction,", 'start': 1216.754, 'duration': 5.524}, {'end': 1233.206, 'text': 'and this is really important because the direction or the position of the main and cross axis has a lot of impact or consequences for other properties that we can use.', 'start': 1222.278, 'duration': 10.928}], 'summary': 'Flex direction affects main and cross axis positioning and impacts other properties.', 'duration': 29.538, 'max_score': 1203.668, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY1203668.jpg'}, {'end': 1318.069, 'src': 'embed', 'start': 1287.194, 'weight': 4, 'content': [{'end': 1293.879, 'text': "So let's have a look at these properties now because the properties we can add or will add are the following ones.", 'start': 1287.194, 'duration': 6.685}, {'end': 1299.782, 'text': "it's align items and it's justify content.", 'start': 1294.62, 'duration': 5.162}, {'end': 1301.263, 'text': 'so two more properties now.', 'start': 1299.782, 'duration': 1.481}, {'end': 1302.103, 'text': 'what does this mean?', 'start': 1301.263, 'duration': 0.84}, {'end': 1303.984, 'text': 'what are these properties doing?', 'start': 1302.103, 'duration': 1.881}, {'end': 1310.126, 'text': "let's have a look at it in an example, because the standard value for align items is this one stretch.", 'start': 1303.984, 'duration': 6.142}, {'end': 1318.069, 'text': 'so if we save that and go back and reload the page, we can see that nothing is happening.', 'start': 1310.126, 'duration': 7.943}], 'summary': 'Discussion on align items and justify content properties in css.', 'duration': 30.875, 'max_score': 1287.194, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY1287194.jpg'}], 'start': 555.556, 'title': 'Flexbox properties and behavior', 'summary': 'Explains the behavior and importance of the flex-wrap property, flex direction property, and the core concept of main axis versus cross axis, with practical implications for layout responsiveness and alignment.', 'chapters': [{'end': 672.347, 'start': 555.556, 'title': 'Understanding flexbox wrap property', 'summary': 'Explains the behavior of the flex-wrap property in a webpage, demonstrating how elements wrap as the page size decreases and the impact on element dimensions, highlighting the importance of the property in controlling layout responsiveness.', 'duration': 116.791, 'highlights': ['The flex-wrap property is demonstrated, showing how elements wrap as the page size decreases, maintaining a specified width (e.g., 200 pixels), and adjusting the height to fit the content, with an example showing a decrease from 150 pixels to 18.5 pixels.', 'The importance of the flex-wrap property in controlling the layout responsiveness is emphasized, indicating its role in adjusting the dimensions of elements as the page size changes.']}, {'end': 1310.126, 'start': 672.707, 'title': 'Flexbox properties and behavior', 'summary': 'Explains the flex wrap property for wrapping items, the flex direction property for changing the display behavior of elements, and the core concept of main axis versus cross axis, with examples and practical implications for align items and justify content.', 'duration': 637.419, 'highlights': ['The chapter explains the flex wrap property for wrapping items, with examples of wrap, wrap reverse, and the implications for responsive design. Examples of wrap and wrap reverse usage.', 'The chapter details the flex direction property, demonstrating the behavior change between row and column, and the impact on element layout. Demonstration of layout change between row and column.', 'The core concept of main axis versus cross axis is explained, highlighting the implications of flex direction on the positioning of elements. Explanation of main axis versus cross axis and its impact.', 'The properties align items and justify content are introduced, with practical examples of their impact on element layout. Introduction and practical examples of align items and justify content properties.']}], 'duration': 754.57, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY555556.jpg', 'highlights': ['The flex-wrap property controls layout responsiveness, adjusting element dimensions as page size changes.', 'Demonstration of flex-wrap property with examples of wrap, wrap reverse, and their implications for responsive design.', "Explanation of flex direction property's impact on element layout, demonstrating behavior change between row and column.", 'Core concept of main axis versus cross axis explained, highlighting its implications on element positioning.', 'Introduction and practical examples of align items and justify content properties.']}, {'end': 1614.268, 'segs': [{'end': 1419.75, 'src': 'embed', 'start': 1366.976, 'weight': 0, 'content': [{'end': 1369.876, 'text': "It's not the impact onto the height, as you might have thought.", 'start': 1366.976, 'duration': 2.9}, {'end': 1377.099, 'text': 'It now has an impact onto the way our elements are displayed on our website regarding the position.', 'start': 1370.517, 'duration': 6.582}, {'end': 1379.64, 'text': "And in this case, it's the center position.", 'start': 1377.379, 'duration': 2.261}, {'end': 1384.601, 'text': 'And why is it then not referring to the height, as I just said that this would be wrong?', 'start': 1380.76, 'duration': 3.841}, {'end': 1394.465, 'text': 'Because align items only refers to the position of our items relating to the cross axis.', 'start': 1385.382, 'duration': 9.083}, {'end': 1404.227, 'text': 'You remember the cross axis now goes from left to right because we defined a flex direction of column.', 'start': 1395.225, 'duration': 9.002}, {'end': 1411.008, 'text': 'So this means our main axis goes down here and the cross axis goes right here from left to right.', 'start': 1404.467, 'duration': 6.541}, {'end': 1414.209, 'text': 'And we defined a value for align items.', 'start': 1411.548, 'duration': 2.661}, {'end': 1419.75, 'text': 'So you can remember that as align items along of the cross axis of center.', 'start': 1414.369, 'duration': 5.381}], 'summary': 'Align items impacts element position, not height, on the website. it refers to the cross axis position, not the height.', 'duration': 52.774, 'max_score': 1366.976, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY1366976.jpg'}, {'end': 1567.672, 'src': 'embed', 'start': 1544.685, 'weight': 2, 'content': [{'end': 1555.028, 'text': 'we can see that our items are now centered if you can see that a little bit more, maybe are now centered along the main axis.', 'start': 1544.685, 'duration': 10.343}, {'end': 1558.629, 'text': 'again, keep in mind, flex direction is row,', 'start': 1555.028, 'duration': 3.601}, {'end': 1567.672, 'text': 'main axis goes from left to right and justify content refers to the positioning of the items along our main axis.', 'start': 1558.629, 'duration': 9.043}], 'summary': 'Items centered along main axis, in row direction.', 'duration': 22.987, 'max_score': 1544.685, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY1544685.jpg'}], 'start': 1310.126, 'title': 'Flexbox alignment concepts', 'summary': 'Discusses the impact of align items property on the height and position of elements, explains the concepts of main axis and cross axis, and demonstrates the use of align items and justify content to position items.', 'chapters': [{'end': 1394.465, 'start': 1310.126, 'title': 'Css flexbox properties', 'summary': 'Discusses the impact of align items property on the height and position of elements in a webpage, demonstrating how it affects the display and positioning of elements based on the flex flow and align items properties.', 'duration': 84.339, 'highlights': ['The align items property affects the height of elements, as demonstrated by changing the stretch value to center, resulting in a different display based on the height of the elements.', 'Changing the flex flow from row to column impacts the way elements are displayed on the website, particularly regarding their position, demonstrating the influence of align items on the position of elements based on the cross axis.']}, {'end': 1496.732, 'start': 1395.225, 'title': 'Flexbox alignment concepts', 'summary': 'Explains the concepts of main axis and cross axis in flexbox, including how to align items along the cross axis and the impact of changing flex direction and align items values.', 'duration': 101.507, 'highlights': ['The main axis and cross axis are determined by the flex direction, with the main axis going from left to right and the cross axis going from top to bottom.', 'Changing the align items value to flex start positions the items at the beginning of the cross axis, while setting it to center aligns the items at the center of the cross axis.', 'Switching the flex direction from column to row changes the behavior, with the main axis now going from left to right and the cross axis from top to bottom.']}, {'end': 1614.268, 'start': 1497.513, 'title': 'Understanding flexbox alignment', 'summary': 'Explains the concepts of align items, cross axis, and main axis in flexbox, and demonstrates the use of align items and justify content to position items along the cross and main axis, with examples of centering and end positioning.', 'duration': 116.755, 'highlights': ['The main axis can also be changed using justify content, which can be used to position items along the main axis with values like center, flex-start, and flex-end.', 'Align items refers to the cross axis, and its behavior can be changed to position items along the cross axis.', 'Demonstrated the use of justify content center to center items along the main axis when flex direction is row.', 'Explained that flex direction affects the main axis orientation, and justify content affects the positioning of items along the main axis.']}], 'duration': 304.142, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY1310126.jpg', 'highlights': ['The align items property affects the height of elements, as demonstrated by changing the stretch value to center, resulting in a different display based on the height of the elements.', 'The main axis and cross axis are determined by the flex direction, with the main axis going from left to right and the cross axis going from top to bottom.', 'The main axis can also be changed using justify content, which can be used to position items along the main axis with values like center, flex-start, and flex-end.']}, {'end': 1802.878, 'segs': [{'end': 1668.971, 'src': 'embed', 'start': 1645.22, 'weight': 1, 'content': [{'end': 1654.553, 'text': 'we have a gap in the beginning and justify content just says that now, if we set both to center, for example, again like this and like that,', 'start': 1645.22, 'duration': 9.333}, {'end': 1661.869, 'text': 'then we can see that the entire content is basically centered and looks like that.', 'start': 1656.368, 'duration': 5.501}, {'end': 1664.97, 'text': 'So this is what it basically looks like.', 'start': 1662.329, 'duration': 2.641}, {'end': 1668.971, 'text': 'And I know that this can be kind of abstract in the beginning.', 'start': 1665.55, 'duration': 3.421}], 'summary': 'Adjusting content to center creates a visually balanced layout.', 'duration': 23.751, 'max_score': 1645.22, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY1645220.jpg'}, {'end': 1676.132, 'src': 'heatmap', 'start': 1645.22, 'weight': 1, 'content': [{'end': 1654.553, 'text': 'we have a gap in the beginning and justify content just says that now, if we set both to center, for example, again like this and like that,', 'start': 1645.22, 'duration': 9.333}, {'end': 1661.869, 'text': 'then we can see that the entire content is basically centered and looks like that.', 'start': 1656.368, 'duration': 5.501}, {'end': 1664.97, 'text': 'So this is what it basically looks like.', 'start': 1662.329, 'duration': 2.641}, {'end': 1668.971, 'text': 'And I know that this can be kind of abstract in the beginning.', 'start': 1665.55, 'duration': 3.421}, {'end': 1676.132, 'text': "Therefore, let's have a quick look at a slide that summarizes kind of what we saw right here in this practical example.", 'start': 1669.471, 'duration': 6.661}], 'summary': 'Content can be centered by setting both the beginning and justify to center.', 'duration': 30.912, 'max_score': 1645.22, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY1645220.jpg'}, {'end': 1720.831, 'src': 'embed', 'start': 1693.024, 'weight': 0, 'content': [{'end': 1697.269, 'text': 'And the cross axis also starting in the top left corner but going from top to bottom.', 'start': 1693.024, 'duration': 4.245}, {'end': 1699.511, 'text': 'We saw that and we know that already.', 'start': 1697.829, 'duration': 1.682}, {'end': 1703.656, 'text': 'What happens now with justify content and align items is the following.', 'start': 1699.912, 'duration': 3.744}, {'end': 1706.098, 'text': 'with justify content.', 'start': 1704.557, 'duration': 1.541}, {'end': 1714.405, 'text': 'we define the position of the elements along our main axis in this case and if this defines the main axis well,', 'start': 1706.098, 'duration': 8.307}, {'end': 1718.749, 'text': 'align items simply defines the position along the cross axis.', 'start': 1714.405, 'duration': 4.344}, {'end': 1720.831, 'text': 'this is what we just saw in this example.', 'start': 1718.749, 'duration': 2.082}], 'summary': 'Demonstrates how justify content and align items define element positions along main and cross axis.', 'duration': 27.807, 'max_score': 1693.024, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY1693024.jpg'}, {'end': 1811.522, 'src': 'embed', 'start': 1782.31, 'weight': 4, 'content': [{'end': 1787.891, 'text': 'And a good source for that is, as quite often, actually the MDN, the Mozilla Developer Network.', 'start': 1782.31, 'duration': 5.581}, {'end': 1793.073, 'text': 'If you look right here onto this page, you can find a link to it down there in the video description also.', 'start': 1788.531, 'duration': 4.542}, {'end': 1798.476, 'text': 'So if you scroll down a bit, you can find some general information about Flexbox right here.', 'start': 1793.353, 'duration': 5.123}, {'end': 1802.878, 'text': 'But if you scroll down, you can find all the different properties you have right here.', 'start': 1799.036, 'duration': 3.842}, {'end': 1805.879, 'text': 'And in our case, we used align items, for example.', 'start': 1802.898, 'duration': 2.981}, {'end': 1811.522, 'text': 'And if you click onto that, you can see all the different values you can use for align items.', 'start': 1806.1, 'duration': 5.422}], 'summary': 'Mdn, the mozilla developer network, is a good source for flexbox with detailed properties and values.', 'duration': 29.212, 'max_score': 1782.31, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY1782310.jpg'}], 'start': 1615.069, 'title': 'Css flexbox properties', 'summary': 'Explains css flexbox properties like align-items and justify-content to control item alignment along the cross and main axes. it also discusses flex direction, justify content, and align items, highlighting their impact on website layout and referencing mdn as a valuable resource.', 'chapters': [{'end': 1668.971, 'start': 1615.069, 'title': 'Css flexbox alignment', 'summary': 'Explains the usage of flexbox properties like align-items and justify-content to control the alignment of items along the cross axis and main axis, as well as how to center the content using justify-content. it also acknowledges the initial abstract nature of the concept.', 'duration': 53.902, 'highlights': ['The properties align-items and justify-content are used to control the positioning of items along the cross axis and main axis respectively, allowing for precise alignment of content (e.g., start, center, end).', 'The usage of justify-content to center the entire content is demonstrated, highlighting the impact of this property on the alignment of items within the flex container.', 'Acknowledgment of the abstract nature of the concept is made, recognizing the potential complexity for learners in understanding the topic initially.']}, {'end': 1802.878, 'start': 1669.471, 'title': 'Understanding flexbox properties', 'summary': 'Explained the main concepts of flex direction, justify content, and align items in flexbox layout, highlighting how they define the positioning of elements along the main and cross axes and their impact on website layout. it also mentioned the mdn as a good source for exploring the different values of these properties.', 'duration': 133.407, 'highlights': ['The chapter emphasized the significance of flex direction, justify content, and align items in defining the positioning of elements along the main and cross axes, providing a clear understanding of their impact on website layout.', 'It mentioned the MDN as a valuable resource for exploring the different values that can be applied to flex direction, justify content, and align items in Flexbox layout.']}], 'duration': 187.809, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY1615069.jpg', 'highlights': ['The properties align-items and justify-content control item alignment along the cross and main axes.', 'The usage of justify-content to center the entire content is demonstrated.', 'The chapter emphasized the significance of flex direction, justify content, and align items in defining the positioning of elements along the main and cross axes.', 'Acknowledgment of the abstract nature of the concept is made, recognizing the potential complexity for learners in understanding the topic initially.', 'It mentioned the MDN as a valuable resource for exploring the different values that can be applied to flex direction, justify content, and align items in Flexbox layout.']}, {'end': 2111.925, 'segs': [{'end': 1878.32, 'src': 'embed', 'start': 1802.898, 'weight': 0, 'content': [{'end': 1805.879, 'text': 'And in our case, we used align items, for example.', 'start': 1802.898, 'duration': 2.981}, {'end': 1811.522, 'text': 'And if you click onto that, you can see all the different values you can use for align items.', 'start': 1806.1, 'duration': 5.422}, {'end': 1817.125, 'text': 'Now, as you can imagine, these are too much values to have a look at them throughout this video.', 'start': 1811.902, 'duration': 5.223}, {'end': 1821.909, 'text': 'Therefore, you can just play around with them now because you have the theoretical background.', 'start': 1817.625, 'duration': 4.284}, {'end': 1826.033, 'text': 'And there are also interesting ones, for example, baseline.', 'start': 1822.63, 'duration': 3.403}, {'end': 1835.502, 'text': "Let's maybe try this one out quickly, because if we add baseline right here as a value and save that and go back and reload the page.", 'start': 1826.373, 'duration': 9.129}, {'end': 1845.71, 'text': 'You can see that now, I hope it becomes clear right here, that the items are now aligned based on their content.', 'start': 1837.443, 'duration': 8.267}, {'end': 1847.972, 'text': 'So as you can see, this is one line.', 'start': 1845.83, 'duration': 2.142}, {'end': 1850.914, 'text': 'This is, for example, what baseline is doing.', 'start': 1848.412, 'duration': 2.502}, {'end': 1852.615, 'text': 'Maybe not the..', 'start': 1851.515, 'duration': 1.1}, {'end': 1854.617, 'text': 'result you want to have right here.', 'start': 1853.476, 'duration': 1.141}, {'end': 1857.421, 'text': 'i just wanted to show you that how this works.', 'start': 1854.617, 'duration': 2.804}, {'end': 1864.388, 'text': 'now we are almost done with the properties, or with the core properties that we can use for our flex container.', 'start': 1857.421, 'duration': 6.967}, {'end': 1872.497, 'text': 'but there is one more interesting thing that i would like to show you, and this thing is called align content.', 'start': 1864.388, 'duration': 8.109}, {'end': 1877.16, 'text': 'now you might say okay, we got a line items, we got a line, we got justify content.', 'start': 1872.497, 'duration': 4.663}, {'end': 1878.32, 'text': 'what is that now?', 'start': 1877.16, 'duration': 1.16}], 'summary': 'Demonstrated align items property and its effects on content alignment in flex container.', 'duration': 75.422, 'max_score': 1802.898, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY1802898.jpg'}, {'end': 2061.998, 'src': 'embed', 'start': 2024.034, 'weight': 3, 'content': [{'end': 2025.855, 'text': "It's always related to the cross axis.", 'start': 2024.034, 'duration': 1.821}, {'end': 2033.34, 'text': 'Then you have justify content, which always refers to the positioning of your items along the main axis.', 'start': 2026.736, 'duration': 6.604}, {'end': 2042.825, 'text': 'And then you have align content, which always refers to the cross axis, but only in cases where you have items in more than one line.', 'start': 2034.12, 'duration': 8.705}, {'end': 2046.968, 'text': 'So I hope, with these examples and with this background knowledge,', 'start': 2043.385, 'duration': 3.583}, {'end': 2053.272, 'text': 'you are now ready to start with Flexbox and maybe use the code you can find right here, as I said, attached to the video,', 'start': 2046.968, 'duration': 6.304}, {'end': 2056.434, 'text': 'or the link is attached to the video to play around and to practice that.', 'start': 2053.272, 'duration': 3.162}, {'end': 2061.998, 'text': 'Also use the MDN and play around with the different values you can apply to your properties.', 'start': 2056.934, 'duration': 5.064}], 'summary': 'Understanding flexbox positioning and usage to improve web layouts.', 'duration': 37.964, 'max_score': 2024.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY2024034.jpg'}, {'end': 2111.925, 'src': 'embed', 'start': 2088.194, 'weight': 2, 'content': [{'end': 2090.715, 'text': 'But what if you want to be more precise?', 'start': 2088.194, 'duration': 2.521}, {'end': 2097.298, 'text': 'What if you want to make sure that specific items inside your flex container behave the way you want?', 'start': 2091.235, 'duration': 6.063}, {'end': 2101.54, 'text': 'Well, then, you also need to apply some properties to these items.', 'start': 2097.758, 'duration': 3.782}, {'end': 2105.062, 'text': "And we'll have a look at that in the next video of the series.", 'start': 2102.08, 'duration': 2.982}, {'end': 2106.382, 'text': 'So I hope to see you there.', 'start': 2105.362, 'duration': 1.02}, {'end': 2109.804, 'text': 'And as always, I can only say thanks a lot for watching.', 'start': 2106.763, 'duration': 3.041}, {'end': 2111.925, 'text': 'Hope to see you in the next video and bye.', 'start': 2110.044, 'duration': 1.881}], 'summary': 'Learn about applying properties to flex container items for precise behavior. stay tuned for the next video!', 'duration': 23.731, 'max_score': 2088.194, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY2088194.jpg'}], 'start': 1802.898, 'title': 'Flexbox properties', 'summary': 'Delves into the basics of flexbox properties, including align content, justify content, and align items, emphasizing their importance for effective web design and layout. it also provides guidance on practical application and using mdn as a learning resource.', 'chapters': [{'end': 1878.32, 'start': 1802.898, 'title': 'Using align items and align content in flexboxes', 'summary': 'Discusses the usage of align items and align content in flexboxes, demonstrating how to change the alignment of items based on their content, and highlighting the practical application of theoretical concepts in web design.', 'duration': 75.422, 'highlights': ['The chapter demonstrates the practical application of align items and align content in flexboxes, emphasizing the ability to change the alignment of items based on their content.', "It showcases the use of 'baseline' as a value for align items, illustrating how the items are aligned based on their content, providing a tangible example of the concept.", 'The presenter emphasizes the importance of playing around with different values for align items to gain practical experience and understanding of their effects.']}, {'end': 2111.925, 'start': 1878.32, 'title': 'Understanding flexbox properties', 'summary': 'Explains the basics of flexbox properties, including align content, justify content, and align items, and emphasizes the importance of understanding these properties for effective web design and layout. it also provides guidance on practicing with different values and using the mdn as a resource for further learning.', 'duration': 233.605, 'highlights': ['The chapter emphasizes the importance of understanding flex direction, align items, justify content, and align content for effective web design and layout. The chapter emphasizes the importance of understanding flex direction, align items, justify content, and align content for effective web design and layout.', 'The chapter advises practicing with different values and utilizing the MDN as a resource for further learning. The chapter advises practicing with different values and utilizing the MDN as a resource for further learning.', 'The chapter introduces the concept of applying properties to items inside a flex container to achieve more precise control over their behavior. The chapter introduces the concept of applying properties to items inside a flex container to achieve more precise control over their behavior.']}], 'duration': 309.027, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/siKKg8Y_tQY/pics/siKKg8Y_tQY1802898.jpg', 'highlights': ['The chapter demonstrates the practical application of align items and align content in flexboxes, emphasizing the ability to change the alignment of items based on their content.', 'The presenter emphasizes the importance of playing around with different values for align items to gain practical experience and understanding of their effects.', 'The chapter introduces the concept of applying properties to items inside a flex container to achieve more precise control over their behavior.', 'The chapter emphasizes the importance of understanding flex direction, align items, justify content, and align content for effective web design and layout.', "It showcases the use of 'baseline' as a value for align items, illustrating how the items are aligned based on their content, providing a tangible example of the concept.", 'The chapter advises practicing with different values and utilizing the MDN as a resource for further learning.']}], 'highlights': ['Flexbox enables the creation of responsive websites, crucial for diverse device usage.', "The core concept of Flexbox is to add 'display: flex' to a parent element, turning it into a flex container, and then add properties like flex flow, justify content, align content, or align items to the flex container for layout control.", "The tutorial emphasizes the use of Flexbox by adding 'display flex' to the parent element, highlighting its significance in controlling the layout of nested divs.", 'The flex-wrap property controls layout responsiveness, adjusting element dimensions as page size changes.', 'The align items property affects the height of elements, as demonstrated by changing the stretch value to center, resulting in a different display based on the height of the elements.', 'The properties align-items and justify-content control item alignment along the cross and main axes.', 'The chapter demonstrates the practical application of align items and align content in flexboxes, emphasizing the ability to change the alignment of items based on their content.']}