title
CSS Flexbox Course

description
Once you've learned Flexbox, you'll wonder how you ever managed to build websites without it. This course gets you up to speed as quickly as possible. You can take the interactive version of the course here: https://scrimba.com/g/gflexbox Flexbox gives you all the tools you needed in order to properly arrange content inside flexible containers. Given that all websites need to be flexbile and responsive these days, Flexbox is a must-have skill for web developers. The course contains the following: - Your first Flexbox layout - Main axis and cross axis - Justify Content - Positioning items - The flex property - Align items - Flex direction column - Wrapping - Flex grow, shrink - Order - Creating a responsive Navbar - Creating a Flexbox image grid You can connect with the course creator Per Harald Borgen via Twitter: https://twitter.com/perborgen -- Learn to code for free and get a developer job: https://www.freecodecamp.com Read hundreds of articles on programming: https://medium.freecodecamp.com

detail
{'title': 'CSS Flexbox Course', 'heatmap': [{'end': 614.778, 'start': 583.503, 'weight': 0.803}, {'end': 1024.57, 'start': 932.25, 'weight': 1}], 'summary': 'The《css flexbox course》covers fundamental flexbox layout creation, positioning, alignment, flex property usage, responsive design, and image grid creation, emphasizing practical examples and tasks for audience practice.', 'chapters': [{'end': 380.124, 'segs': [{'end': 47.894, 'src': 'embed', 'start': 3.868, 'weight': 0, 'content': [{'end': 10.871, 'text': "Hey, there, in this lecture, you're going to learn how to create your very first flexbox layout using the example you can see on the page here.", 'start': 3.868, 'duration': 7.003}, {'end': 17.213, 'text': "I've already added a little bit of styling in the basic dot CSS file, though this has nothing to do with the flexbox itself.", 'start': 10.871, 'duration': 6.342}, {'end': 24.556, 'text': 'Here in the index dot HTML, you can see the markup for the example, it contains a nav element with the class of container.', 'start': 17.513, 'duration': 7.043}, {'end': 28.98, 'text': 'And inside of that container, we have three divs, which are the flex items.', 'start': 24.836, 'duration': 4.144}, {'end': 34.987, 'text': "As you might guess, we're going to create a navbar here as this displays home search and log out.", 'start': 29.36, 'duration': 5.627}, {'end': 44.333, 'text': "Now, the first thing you need to understand is the concept of a container and its items, as that's always how you build up your flexbox layout.", 'start': 35.767, 'duration': 8.566}, {'end': 47.894, 'text': "they don't have to be divs or navs, could have been ul element.", 'start': 44.333, 'duration': 3.561}], 'summary': 'Learn to create flexbox layout with nav, home, search, log out using container and flex items', 'duration': 44.026, 'max_score': 3.868, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo3868.jpg'}, {'end': 127.887, 'src': 'embed', 'start': 93.906, 'weight': 2, 'content': [{'end': 98.388, 'text': 'And as you also can see, the flexbox container is by default a block element,', 'start': 93.906, 'duration': 4.482}, {'end': 103.811, 'text': "as it takes up all available space in the width except for the little margin I've added to the left and right hand side.", 'start': 98.388, 'duration': 5.423}, {'end': 107.553, 'text': 'Okay, so that was a very quick introduction to flexbox.', 'start': 104.551, 'duration': 3.002}, {'end': 114.597, 'text': "In the next lecture, I'm going to teach you about the concept of access, as that is core in order to understand flexbox properly.", 'start': 107.933, 'duration': 6.664}, {'end': 115.678, 'text': "So I'll see you there.", 'start': 114.957, 'duration': 0.721}, {'end': 127.887, 'text': "Hey, in this lecture, I'm going to teach you about access, as that is a core concept you need to understand in order to work properly with flexbox.", 'start': 120.862, 'duration': 7.025}], 'summary': 'Introduction to flexbox, core concept of access in next lecture', 'duration': 33.981, 'max_score': 93.906, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo93906.jpg'}, {'end': 245.481, 'src': 'embed', 'start': 217.67, 'weight': 4, 'content': [{'end': 224.076, 'text': 'But I want you to be aware that the main axis is horizontal because the flex direction is set to row.', 'start': 217.67, 'duration': 6.406}, {'end': 226.418, 'text': 'However, it can be vertical as well.', 'start': 224.556, 'duration': 1.862}, {'end': 231.882, 'text': "Okay, in the next lecture, I'm going to teach you how to position items along the main axis.", 'start': 226.878, 'duration': 5.004}, {'end': 233.904, 'text': "So stay tuned, and I'll see you there.", 'start': 232.322, 'duration': 1.582}, {'end': 245.481, 'text': "Hey, there, in this lecture, I'm going to teach you how to position the items along the main axis, which goes, as you hopefully remember,", 'start': 238.035, 'duration': 7.446}], 'summary': 'Teaching positioning of items along main axis in flexbox layout.', 'duration': 27.811, 'max_score': 217.67, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo217670.jpg'}, {'end': 305.758, 'src': 'embed', 'start': 276.819, 'weight': 1, 'content': [{'end': 282.16, 'text': 'I actually want to paste in a few of them here for you to experiment with towards the end of this lecture.', 'start': 276.819, 'duration': 5.341}, {'end': 292.085, 'text': 'by default justify content is set to flex start, meaning that the content is squeezed together at the start of the main axis,', 'start': 283.117, 'duration': 8.968}, {'end': 293.787, 'text': 'which is the left hand side.', 'start': 292.085, 'duration': 1.702}, {'end': 295.428, 'text': 'if we change it to flex end.', 'start': 293.787, 'duration': 1.641}, {'end': 301.113, 'text': 'And, as you can see, the content will move over to the end of the main axis on the right hand side.', 'start': 295.989, 'duration': 5.124}, {'end': 305.758, 'text': 'we can also use center, and that will of course center it.', 'start': 301.113, 'duration': 4.645}], 'summary': 'Demonstration of justify content in flexbox, with options for start, end, and center alignment.', 'duration': 28.939, 'max_score': 276.819, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo276819.jpg'}], 'start': 3.868, 'title': 'Flexbox layout fundamentals', 'summary': 'Covers creating a flexbox layout for a navbar with a container and three flex items, emphasizing the concept of a container and its items as the foundation for building the layout. it also introduces the concept of flexbox layout, showcasing how to turn a container into a flexbox layout and explaining the main and cross axes, along with different values for positioning items along the main axis.', 'chapters': [{'end': 47.894, 'start': 3.868, 'title': 'Creating flexbox layout', 'summary': 'Covers creating a flexbox layout for a navbar with a container and three flex items, emphasizing the concept of a container and its items as the foundation for building the layout.', 'duration': 44.026, 'highlights': ['The chapter emphasizes the concept of a container and its items as the foundation for building the flexbox layout.', 'It mentions creating a navbar with a container and three flex items, namely home, search, and log out.', 'The lecture focuses on using markup elements like nav, divs, and ul for creating the flexbox layout.']}, {'end': 380.124, 'start': 47.954, 'title': 'Flexbox layout and axis positioning', 'summary': 'Introduces the concept of flexbox layout, showcasing how to turn a container into a flexbox layout and explaining the main and cross axes, along with different values for positioning items along the main axis.', 'duration': 332.17, 'highlights': ['The concept of flexbox layout is introduced, demonstrating how to turn a container into a flexbox layout.', 'The main and cross axes of a flexbox container are explained, along with the ability to change the flex direction from horizontal to vertical.', 'Different values for positioning items along the main axis using justify content are demonstrated, including flex start, flex end, center, space round, space between, and space evenly.']}], 'duration': 376.256, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo3868.jpg', 'highlights': ['The lecture focuses on using markup elements like nav, divs, and ul for creating the flexbox layout.', 'Different values for positioning items along the main axis using justify content are demonstrated, including flex start, flex end, center, space round, space between, and space evenly.', 'The concept of flexbox layout is introduced, demonstrating how to turn a container into a flexbox layout.', 'The chapter emphasizes the concept of a container and its items as the foundation for building the flexbox layout.', 'The main and cross axes of a flexbox container are explained, along with the ability to change the flex direction from horizontal to vertical.', 'It mentions creating a navbar with a container and three flex items, namely home, search, and log out.']}, {'end': 888.484, 'segs': [{'end': 410.807, 'src': 'embed', 'start': 384.909, 'weight': 5, 'content': [{'end': 394.175, 'text': "Hey, in this lecture I'm going to explain how you can adjust the position of single items along the main axis using the good old technique of margin auto,", 'start': 384.909, 'duration': 9.266}, {'end': 400.139, 'text': "because these various justify content values are nice and handy, but they don't always do what you want them to do.", 'start': 394.175, 'duration': 5.964}, {'end': 405.283, 'text': 'For example, I might not want to have the items spread around the container like this.', 'start': 400.34, 'duration': 4.943}, {'end': 410.807, 'text': 'perhaps I want the home and search over on the left hand side and the logout over on the right hand side.', 'start': 405.283, 'duration': 5.524}], 'summary': 'Lecture explains adjusting item positions on main axis using margin auto, citing limitations of justify content values.', 'duration': 25.898, 'max_score': 384.909, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo384909.jpg'}, {'end': 578.162, 'src': 'embed', 'start': 554.431, 'weight': 0, 'content': [{'end': 561.133, 'text': "In the next one, you're going to learn a really cool property called flex, which allows you to have responsive with on the items themselves.", 'start': 554.431, 'duration': 6.702}, {'end': 562.354, 'text': "So I'll see you there.", 'start': 561.614, 'duration': 0.74}, {'end': 570.301, 'text': "Hey, in this lecture, you're going to learn about the flex property,", 'start': 566.94, 'duration': 3.361}, {'end': 578.162, 'text': 'which allows you to set the width of the items according to the width of the entire container, meaning that they will become responsive,', 'start': 570.301, 'duration': 7.861}], 'summary': 'Learn about the flex property for responsive design.', 'duration': 23.731, 'max_score': 554.431, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo554431.jpg'}, {'end': 614.778, 'src': 'heatmap', 'start': 583.503, 'weight': 0.803, 'content': [{'end': 593.685, 'text': "So if we want all of these items to stretch across the entire container and grow and shrink with it, we'll simply target the items with dot container.", 'start': 583.503, 'duration': 10.182}, {'end': 601.009, 'text': 'select all the direct children, which also are divs, and then give them a flex property of one.', 'start': 594.605, 'duration': 6.404}, {'end': 608.935, 'text': 'And as you can see, they now take up an equal amount of space, a third each, and they grow and shrink with the size of the container.', 'start': 601.229, 'duration': 7.706}, {'end': 614.778, 'text': "Now, there's a little bit of magic here, as flex is actually a shorthand for three other properties.", 'start': 609.355, 'duration': 5.423}], 'summary': 'Using flex property makes items equally spaced and responsive to container size.', 'duration': 31.275, 'max_score': 583.503, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo583503.jpg'}, {'end': 726.953, 'src': 'embed', 'start': 698.298, 'weight': 2, 'content': [{'end': 706.162, 'text': 'Now each of them take up 25% of the width, and they grow and shrink with the container, we can also target specific items.', 'start': 698.298, 'duration': 7.864}, {'end': 717.527, 'text': "Let's say that for example, we want the search item here to be twice as wide as the rest of the items, then we'll simply do container search.", 'start': 706.802, 'duration': 10.725}, {'end': 720.454, 'text': 'and set flex to 2.', 'start': 719.13, 'duration': 1.324}, {'end': 726.953, 'text': "As you can see, it's now twice as wide as the three other items.", 'start': 720.454, 'duration': 6.499}], 'summary': 'Using flexbox, items take up 25% width, one item set to twice the width.', 'duration': 28.655, 'max_score': 698.298, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo698298.jpg'}, {'end': 798.708, 'src': 'embed', 'start': 774.697, 'weight': 1, 'content': [{'end': 782.781, 'text': "what I've found to be a more realistic use case is to have one of the items doing all the flexing, while the others stay at a fixed width.", 'start': 774.697, 'duration': 8.084}, {'end': 788.884, 'text': 'And we can achieve that by simply removing the flex one on all the items except the search.', 'start': 783.101, 'duration': 5.783}, {'end': 798.708, 'text': 'Now, as you can see, the home logout profile have a fixed width, while the search item growing and shrinking with the width of the container.', 'start': 789.924, 'duration': 8.784}], 'summary': 'Achieved a realistic use case by having one item flexing while others stay fixed width.', 'duration': 24.011, 'max_score': 774.697, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo774697.jpg'}], 'start': 384.909, 'title': 'Flexbox layouts and positioning', 'summary': 'Explores flexbox positioning using margin auto for precise item placement and introduces the flex property for responsive width. it also discusses the benefits of using flexbox for creating efficient and adaptable layouts, demonstrating space allocation and flexible sizing.', 'chapters': [{'end': 643.02, 'start': 384.909, 'title': 'Flexbox position adjustment', 'summary': 'Explains how to adjust the position of single items along the main axis using margin auto, allowing for precise positioning of items within a flex container. it also introduces the flex property for responsive width, demonstrating how items can stretch across the entire container and grow and shrink with it.', 'duration': 258.111, 'highlights': ['The chapter explains how to adjust the position of single items along the main axis using margin auto.', 'The lecture demonstrates how to use the flex property for responsive width, allowing items to stretch across the entire container and grow and shrink with it.']}, {'end': 888.484, 'start': 643.28, 'title': 'Css flexbox layouts', 'summary': 'Explains the benefits of using flexbox for creating responsive layouts, demonstrating how to allocate space for items, target specific items for flexible sizing, and achieve differing item behaviors, leading to a more efficient and adaptable layout.', 'duration': 245.204, 'highlights': ['The chapter demonstrates the advantage of using flexbox for creating responsive layouts, eliminating the need to manually adjust item widths when adding new items, and ensuring all items are responsive.', 'It explains how to allocate space for items using flexbox, showcasing how the items take up 25% of the width and grow and shrink with the container.', 'The chapter illustrates targeting specific items for flexible sizing, exemplifying how a particular item can be made twice as wide as others within the flex container.', 'It provides a practical example of achieving differing item behaviors in a flex container, showing how one item can have a fixed width while others grow and shrink with the container, offering a more realistic use case for flexbox layouts.', 'The chapter presents a task to make the search item have a fixed width while the home and logout items grow as the container widens, and then demonstrates the solution by adjusting the flex behavior of the items accordingly.']}], 'duration': 503.575, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo384909.jpg', 'highlights': ['The chapter demonstrates the advantage of using flexbox for creating responsive layouts, eliminating the need to manually adjust item widths when adding new items, and ensuring all items are responsive.', 'The chapter presents a task to make the search item have a fixed width while the home and logout items grow as the container widens, and then demonstrates the solution by adjusting the flex behavior of the items accordingly.', 'It explains how to allocate space for items using flexbox, showcasing how the items take up 25% of the width and grow and shrink with the container.', 'The chapter illustrates targeting specific items for flexible sizing, exemplifying how a particular item can be made twice as wide as others within the flex container.', 'The lecture demonstrates how to use the flex property for responsive width, allowing items to stretch across the entire container and grow and shrink with it.', 'The chapter explains how to adjust the position of single items along the main axis using margin auto.', 'The chapter introduces the flex property for responsive width.']}, {'end': 1356.583, 'segs': [{'end': 973.591, 'src': 'embed', 'start': 940.334, 'weight': 1, 'content': [{'end': 943.776, 'text': 'Now, a quick note on this height 100%.', 'start': 940.334, 'duration': 3.442}, {'end': 950.759, 'text': "This only works because we've set the height of the HTML and the body to 100%.", 'start': 943.776, 'duration': 6.983}, {'end': 957.222, 'text': "If we hadn't done that, then the height of the HTML and the body would just be whatever the container forces it to be,", 'start': 950.759, 'duration': 6.463}, {'end': 964.986, 'text': "meaning whatever height the container needs in order to display its content, and thereby setting the height to 100% wouldn't have any effect at all.", 'start': 957.222, 'duration': 7.764}, {'end': 966.807, 'text': "just remove it doesn't do anything.", 'start': 964.986, 'duration': 1.821}, {'end': 973.591, 'text': 'So this is a nice technique for having the container responsive in the height as well.', 'start': 968.248, 'duration': 5.343}], 'summary': 'Setting html and body height to 100% enables responsive container height.', 'duration': 33.257, 'max_score': 940.334, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo940334.jpg'}, {'end': 1047.799, 'src': 'heatmap', 'start': 932.25, 'weight': 2, 'content': [{'end': 939.574, 'text': 'Now, as you can see, they stretch across the axis going from top to bottom, regardless of how tall it is.', 'start': 932.25, 'duration': 7.324}, {'end': 943.776, 'text': 'Now, a quick note on this height 100%.', 'start': 940.334, 'duration': 3.442}, {'end': 950.759, 'text': "This only works because we've set the height of the HTML and the body to 100%.", 'start': 943.776, 'duration': 6.983}, {'end': 957.222, 'text': "If we hadn't done that, then the height of the HTML and the body would just be whatever the container forces it to be,", 'start': 950.759, 'duration': 6.463}, {'end': 964.986, 'text': "meaning whatever height the container needs in order to display its content, and thereby setting the height to 100% wouldn't have any effect at all.", 'start': 957.222, 'duration': 7.764}, {'end': 966.807, 'text': "just remove it doesn't do anything.", 'start': 964.986, 'duration': 1.821}, {'end': 973.591, 'text': 'So this is a nice technique for having the container responsive in the height as well.', 'start': 968.248, 'duration': 5.343}, {'end': 979.494, 'text': 'Setting the HTML and the body to 100% and the container as well.', 'start': 974.511, 'duration': 4.983}, {'end': 985.878, 'text': 'Okay, so by default, align items is set to stretch.', 'start': 980.495, 'duration': 5.383}, {'end': 991.779, 'text': 'So this align items here is the property that controls the items in the cross axis.', 'start': 986.997, 'duration': 4.782}, {'end': 1001.424, 'text': "If we change it to, for example, flex start, as you can see, then they're pushed all the way to the top, the start of the cross axis,", 'start': 992.52, 'duration': 8.904}, {'end': 1006.247, 'text': 'and they only take up as much space in the height as they need in order to display their content.', 'start': 1001.424, 'duration': 4.823}, {'end': 1011.97, 'text': "We can also do flex and that'll push them downwards to the end of the axis.", 'start': 1006.827, 'duration': 5.143}, {'end': 1016.492, 'text': "And of course, you can also do center, that'll center it.", 'start': 1012.83, 'duration': 3.662}, {'end': 1024.57, 'text': 'Now, as a little side note here, I want to point out that flexbox is great for centering an item inside of a container.', 'start': 1017.247, 'duration': 7.323}, {'end': 1036.518, 'text': "For example, let's say that we only had one item here could be a button with the X inside of it like this, for example.", 'start': 1025.692, 'duration': 10.826}, {'end': 1047.799, 'text': 'And we could easily center this inside of the container using align items and combining it with justify content and doing center there.', 'start': 1037.657, 'duration': 10.142}], 'summary': "Setting html and body to 100% allows for responsive container height and align items property controls cross-axis items' positioning.", 'duration': 55.279, 'max_score': 932.25, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo932250.jpg'}, {'end': 1251.592, 'src': 'embed', 'start': 1220.211, 'weight': 6, 'content': [{'end': 1224.775, 'text': "So why is that? Well, it's because the height of the container is not set explicitly.", 'start': 1220.211, 'duration': 4.564}, {'end': 1228.918, 'text': "It's just as tall as the content inside of it forces it to be.", 'start': 1225.476, 'duration': 3.442}, {'end': 1237.604, 'text': "meaning that has no extra space when it's trying to push all the content towards the flex end, just the bottom of the container.", 'start': 1229.739, 'duration': 7.865}, {'end': 1242.827, 'text': 'What we have to do is explicitly set the height of the container to 100%.', 'start': 1238.164, 'duration': 4.663}, {'end': 1251.592, 'text': 'And there you can see now the container takes up the entire window, or almost at least, and the justify content.', 'start': 1242.827, 'duration': 8.765}], 'summary': 'Set container height to 100% to occupy entire window and justify content.', 'duration': 31.381, 'max_score': 1220.211, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo1220211.jpg'}, {'end': 1303.051, 'src': 'embed', 'start': 1275.737, 'weight': 0, 'content': [{'end': 1278.638, 'text': "That's also the default way of doing it.", 'start': 1275.737, 'duration': 2.901}, {'end': 1284.138, 'text': 'As you can see, we can also do center and that will center it.', 'start': 1279.378, 'duration': 4.76}, {'end': 1294.045, 'text': "Okay, let's now look at align items, which controls the layout in the cross axis, which now is horizontal, going from left to right.", 'start': 1285.499, 'duration': 8.546}, {'end': 1303.051, 'text': 'If we want to shove the items over to the right hand side, for example, we can do line items, and do flex.', 'start': 1294.585, 'duration': 8.466}], 'summary': 'Demonstrates different ways of aligning items in a horizontal layout using flexbox.', 'duration': 27.314, 'max_score': 1275.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo1275737.jpg'}], 'start': 890.465, 'title': 'Flexbox layout and alignment', 'summary': "Teaches how to control content along the cross axis in flexbox, covering align items property, setting height to 100% for responsive containers, and centering items inside a container. it also discusses using flexbox properties like 'align self', 'flex direction', 'justify content', 'align items' to control the layout and alignment of items within a flex container, showcasing examples and providing tasks for the audience to practice.", 'chapters': [{'end': 1078.808, 'start': 890.465, 'title': 'Control content along cross axis', 'summary': 'Teaches how to control content along the cross axis in flexbox, covering align items property, setting height to 100% for responsive containers, and centering items inside a container.', 'duration': 188.343, 'highlights': ['The align items property in flexbox controls the items in the cross axis, allowing options such as stretch, flex start, flex end, and center.', 'Setting the height of the container to 100% makes it responsive in height, but it only works if the height of the HTML and the body is also set to 100%.', 'Flexbox is great for centering an item inside a container, achieved by combining align items and justify content properties.', 'Flexbox can be used to easily align a single item inside a container, such as centering a logout button.']}, {'end': 1356.583, 'start': 1083.233, 'title': 'Flexbox layout and alignment', 'summary': "Discusses using flexbox properties like 'align self', 'flex direction', 'justify content', 'align items' to control the layout and alignment of items within a flex container, showcasing examples and providing tasks for the audience to practice.", 'duration': 273.35, 'highlights': ['Using align self and align items to control item alignment within a flex container', 'Introduction to flex direction and its impact on item layout', 'Explaining the impact of justify content when container height is not explicitly set']}], 'duration': 466.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo890465.jpg', 'highlights': ['The align items property in flexbox controls the items in the cross axis, allowing options such as stretch, flex start, flex end, and center.', 'Setting the height of the container to 100% makes it responsive in height, but it only works if the height of the HTML and the body is also set to 100%.', 'Flexbox is great for centering an item inside a container, achieved by combining align items and justify content properties.', 'Using align self and align items to control item alignment within a flex container', 'Introduction to flex direction and its impact on item layout', 'Flexbox can be used to easily align a single item inside a container, such as centering a logout button.', 'Explaining the impact of justify content when container height is not explicitly set']}, {'end': 1593.109, 'segs': [{'end': 1384.233, 'src': 'embed', 'start': 1357.697, 'weight': 0, 'content': [{'end': 1363.2, 'text': "then we'll need to target the cross axis, the align items and change that to flex.", 'start': 1357.697, 'duration': 5.503}, {'end': 1368.684, 'text': 'And as this is the end of the cross axis, the horizontal one.', 'start': 1363.881, 'duration': 4.803}, {'end': 1379.35, 'text': 'Now we also need to place it in the end of the main axis, which now goes from top to bottom, meaning that will also set justify content to flex.', 'start': 1369.624, 'duration': 9.726}, {'end': 1381.332, 'text': 'And there you go.', 'start': 1380.351, 'duration': 0.981}, {'end': 1384.233, 'text': "In the next lecture, we're going to look at wrapping.", 'start': 1382.052, 'duration': 2.181}], 'summary': 'Adjust cross axis and main axis alignment to flex. next: wrapping.', 'duration': 26.536, 'max_score': 1357.697, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo1357697.jpg'}, {'end': 1468.683, 'src': 'embed', 'start': 1442.744, 'weight': 1, 'content': [{'end': 1448.588, 'text': "if there's not enough within the container itself to fill that content, it'll automatically scale it down.", 'start': 1442.744, 'duration': 5.844}, {'end': 1454.773, 'text': "And by default won't allow you to, for example, push any of the items down to the next row.", 'start': 1448.608, 'duration': 6.165}, {'end': 1461.238, 'text': "And that's because flexbox has a flex wrap property set to no wrap.", 'start': 1455.374, 'duration': 5.864}, {'end': 1468.683, 'text': "by default it doesn't allow wrapping, meaning you can only have one row or one column along your given main axis.", 'start': 1461.238, 'duration': 7.445}], 'summary': 'Flexbox automatically scales down content to fit container and defaults to single row or column.', 'duration': 25.939, 'max_score': 1442.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo1442744.jpg'}, {'end': 1523.946, 'src': 'embed', 'start': 1494.349, 'weight': 3, 'content': [{'end': 1501.936, 'text': 'Now the total width of the container is less than 600 pixels, meaning it can only fit one 300 pixel item on each row.', 'start': 1494.349, 'duration': 7.587}, {'end': 1506.981, 'text': 'However, if it has enough room, it fills up with as many items as can on each row.', 'start': 1502.217, 'duration': 4.764}, {'end': 1510.885, 'text': 'Okay, so that was a quick intro to flex wrap.', 'start': 1507.762, 'duration': 3.123}, {'end': 1512.567, 'text': "I'll see you in the next lecture.", 'start': 1511.225, 'duration': 1.342}, {'end': 1523.946, 'text': "Hey there, in this lecture, we're going to take a deep dive into the flex property, which we talked about in the previous lesson.", 'start': 1517.602, 'duration': 6.344}], 'summary': 'Container can fit one 300px item on each row, flex property explained.', 'duration': 29.597, 'max_score': 1494.349, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo1494349.jpg'}, {'end': 1565.143, 'src': 'embed', 'start': 1533.813, 'weight': 2, 'content': [{'end': 1538.956, 'text': "That means that they will take up half the space each and they'll grow and shrink with the size of the container.", 'start': 1533.813, 'duration': 5.143}, {'end': 1545.721, 'text': 'However, as I mentioned earlier, flex is actually a shorthand property for three other properties.', 'start': 1539.136, 'duration': 6.585}, {'end': 1560.236, 'text': "they're called flex, row, x, shrink, flex, aces, and setting flex equal to one.", 'start': 1546.98, 'duration': 13.256}, {'end': 1565.143, 'text': "And when we set the flex value, we're actually setting all three of these.", 'start': 1561.057, 'duration': 4.086}], 'summary': 'Flex property allows items to grow and shrink with container size.', 'duration': 31.33, 'max_score': 1533.813, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo1533813.jpg'}], 'start': 1357.697, 'title': 'Flexbox and the flex property', 'summary': 'Covers flexbox wrapping and alignment, demonstrating the control of item alignment within the container, and the enabling of items to be displayed in multiple rows or columns. it also explains the flex property and its influence on item layout, including the shorthand representation of its components: grow, shrink, and basis values.', 'chapters': [{'end': 1493.569, 'start': 1357.697, 'title': 'Flexbox wrapping and alignment', 'summary': 'Covers the process of wrapping items in flexbox, demonstrating how setting the align items and justify content properties to flex can control the alignment of items within the container, and how changing the flex wrap property to allow wrapping enables items to be displayed in multiple rows or columns based on the container width.', 'duration': 135.872, 'highlights': ['The chapter explains how setting the align items and justify content properties to flex controls the alignment of items within the container.', 'The chapter demonstrates how changing the flex wrap property to allow wrapping enables items to be displayed in multiple rows or columns based on the container width.', 'The lecture emphasizes that by default, flexbox has a flex wrap property set to no wrap, allowing only one row or one column along the given main axis.', "The lecture highlights that changing the flex wrap property to wrap allows the content to wrap and display in multiple rows or columns based on the container's width."]}, {'end': 1593.109, 'start': 1494.349, 'title': 'Flex property deep dive', 'summary': 'Introduces the flex property, explaining how it influences the layout of items within a container, and the shorthand representation of its three key components: grow, shrink, and basis values.', 'duration': 98.76, 'highlights': ['The flex property influences the layout of items within a container, with a shorthand representation for its three key components: grow, shrink, and basis values.', 'Setting the flex value actually sets the grow, shrink, and basis values, with the shorthand representation being a single value representing them in the order: grow, shrink, and basis.', 'The total width of the container is less than 600 pixels, allowing only one 300 pixel item on each row and filling up with as many items as possible if there is enough room.']}], 'duration': 235.412, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo1357697.jpg', 'highlights': ['The chapter explains how setting the align items and justify content properties to flex controls the alignment of items within the container.', 'The lecture emphasizes that by default, flexbox has a flex wrap property set to no wrap, allowing only one row or one column along the given main axis.', 'The flex property influences the layout of items within a container, with a shorthand representation for its three key components: grow, shrink, and basis values.', 'The chapter demonstrates how changing the flex wrap property to allow wrapping enables items to be displayed in multiple rows or columns based on the container width.']}, {'end': 2206.385, 'segs': [{'end': 1649.565, 'src': 'embed', 'start': 1622.552, 'weight': 1, 'content': [{'end': 1629.775, 'text': "Now what we're going to do is set the flex basis on both of the items, we'll set it to 200 pixels.", 'start': 1622.552, 'duration': 7.223}, {'end': 1634.756, 'text': 'And that on both.', 'start': 1631.735, 'duration': 3.021}, {'end': 1640.018, 'text': 'Now, We have a container with two items, which each are set to 200 pixels.', 'start': 1635.877, 'duration': 4.141}, {'end': 1645.502, 'text': "At least they'll be 200 pixels if the container is more than 400 pixels wide.", 'start': 1640.479, 'duration': 5.023}, {'end': 1649.565, 'text': 'So flex basis is a way of setting the base width of the element.', 'start': 1645.842, 'duration': 3.723}], 'summary': 'Setting flex basis to 200 pixels for two items in a container.', 'duration': 27.013, 'max_score': 1622.552, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo1622552.jpg'}, {'end': 1724.842, 'src': 'embed', 'start': 1677.121, 'weight': 2, 'content': [{'end': 1680.803, 'text': 'Now you can see, they actually grow with the width of the container.', 'start': 1677.121, 'duration': 3.682}, {'end': 1689.048, 'text': 'So flex grow basically decides how much of the extra space should be distributed to the various items.', 'start': 1681.324, 'duration': 7.724}, {'end': 1700.336, 'text': 'If we set them to zero, on both of these, this extra space will not be distributed to either home or logout, since they both have a flex grow of zero.', 'start': 1689.468, 'duration': 10.868}, {'end': 1709.385, 'text': "However, if for example, logout gets a flex grow of one, it'll take up all of the remaining space and home will get nothing of the remaining space.", 'start': 1700.456, 'duration': 8.929}, {'end': 1715.491, 'text': 'But as you saw, if the home also has value one, it too will grow with the size of the container.', 'start': 1709.946, 'duration': 5.545}, {'end': 1724.842, 'text': 'And now as these values are identical, both have one, the flexbox layout will distribute the extra space evenly across the two items.', 'start': 1716.092, 'duration': 8.75}], 'summary': 'Flex grow distributes extra space evenly between items.', 'duration': 47.721, 'max_score': 1677.121, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo1677121.jpg'}, {'end': 1808.055, 'src': 'embed', 'start': 1775.641, 'weight': 0, 'content': [{'end': 1780.582, 'text': 'And if both of them are set to one, they will distribute the extra space evenly across each other.', 'start': 1775.641, 'duration': 4.941}, {'end': 1784.023, 'text': "Okay, so now let's move on to flex shrink.", 'start': 1780.962, 'duration': 3.061}, {'end': 1790.744, 'text': "Let's set these flex grow values back to zero, copy the shrink down here and down here.", 'start': 1784.403, 'duration': 6.341}, {'end': 1800.63, 'text': "So as you remember, even though we've set the basis here to 200 pixels, the flex container will force them to be less than 200 pixels.", 'start': 1791.444, 'duration': 9.186}, {'end': 1808.055, 'text': 'If the container is less than 400 pixels, like now, now there may be 150 150 pixels each or something like that.', 'start': 1801.21, 'duration': 6.845}], 'summary': 'Explains flex grow and shrink in css, with example and quantifiable data', 'duration': 32.414, 'max_score': 1775.641, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo1775641.jpg'}, {'end': 2053.543, 'src': 'embed', 'start': 2025.304, 'weight': 4, 'content': [{'end': 2030.49, 'text': 'But once they cross the 200 pixel threshold about here, the logout takes over.', 'start': 2025.304, 'duration': 5.186}, {'end': 2032.753, 'text': 'Okay, so that was it.', 'start': 2031.932, 'duration': 0.821}, {'end': 2034.755, 'text': "And I'll see you in the next lecture.", 'start': 2033.053, 'duration': 1.702}, {'end': 2045.5, 'text': 'Hey, there really nice thing about flexbox is that it has so called source order independence,', 'start': 2039.537, 'duration': 5.963}, {'end': 2050.762, 'text': "meaning that you can move around on the items regardless of how they're laid out in the markup.", 'start': 2045.5, 'duration': 5.262}, {'end': 2053.543, 'text': 'And an example of this is the order property.', 'start': 2051.303, 'duration': 2.24}], 'summary': 'Flexbox allows source order independence, demonstrated by the order property.', 'duration': 28.239, 'max_score': 2025.304, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo2025304.jpg'}], 'start': 1593.83, 'title': 'Flexbox layout properties', 'summary': 'Explains the flex basis, flex grow, and flex shrink properties and their impact on item width and growth in a flexbox layout. it also demonstrates the distribution of extra space and source order independence using examples.', 'chapters': [{'end': 1748.142, 'start': 1593.83, 'title': 'Flexbox layout explanation', 'summary': 'Explains the properties flex basis, flex grow, and flex shrink, demonstrating how they affect the width and growth of container items, with examples showing the distribution of extra space based on the assigned values.', 'duration': 154.312, 'highlights': ['The chapter covers the properties flex basis, flex grow, and flex shrink, which are used to control the width and growth of container items.', 'Examples illustrate how setting flex basis to 200 pixels maintains the item width regardless of extra space in the container, and how the items start to shrink if the container width is less than 400 pixels.', 'The discussion on flex grow demonstrates how assigning different values to items determines the distribution of extra space, with examples showing the impact of setting flex grow to zero, one, and higher values like two and five.']}, {'end': 2206.385, 'start': 1750.684, 'title': 'Flexbox properties and source order independence', 'summary': "Covers the concept of flex grow and flex shrink properties in flexbox layout design, with examples of setting values to control the item's behavior when growing and shrinking, and also demonstrates the source order independence using the order property to change the visual order of items in the flex container.", 'duration': 455.701, 'highlights': ["The chapter explains the concept of flex grow and flex shrink properties, demonstrating how setting values can control the item's behavior when growing and shrinking.", 'The chapter demonstrates the source order independence using the order property to change the visual order of items in the flex container.']}], 'duration': 612.555, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo1593830.jpg', 'highlights': ['The chapter covers the properties flex basis, flex grow, and flex shrink.', 'Examples illustrate setting flex basis to 200px maintains item width.', 'Demonstrates how assigning different values to items determines the distribution of extra space.', 'Explains the concept of flex grow and flex shrink properties.', 'Demonstrates source order independence using the order property.']}, {'end': 2557.73, 'segs': [{'end': 2256.724, 'src': 'embed', 'start': 2207.986, 'weight': 0, 'content': [{'end': 2211.327, 'text': 'And now that is laid out towards the end 321.', 'start': 2207.986, 'duration': 3.341}, {'end': 2212.327, 'text': 'And that was it.', 'start': 2211.327, 'duration': 1}, {'end': 2214.108, 'text': 'I hope you managed to do this as well.', 'start': 2212.508, 'duration': 1.6}, {'end': 2218.65, 'text': "And congratulations, you've completed the main section of this flexbox course.", 'start': 2214.788, 'duration': 3.862}, {'end': 2220.67, 'text': 'So give yourself a pat on the back.', 'start': 2219.13, 'duration': 1.54}, {'end': 2227.413, 'text': "And if you have any questions, feel free to ask that in the q&a section and and I'll answer it as soon as possible.", 'start': 2221.03, 'duration': 6.383}, {'end': 2228.233, 'text': 'Thank you.', 'start': 2227.993, 'duration': 0.24}, {'end': 2241.658, 'text': "Hey, in this bonus lecture, you're going to learn how to create a fully responsive navbar which adapts itself to various screen sizes,", 'start': 2233.055, 'duration': 8.603}, {'end': 2249.341, 'text': "using a bunch of the concepts you've learned so far, including flex grow, flex shrink, flex basis, flex wrap and the order property.", 'start': 2241.658, 'duration': 7.683}, {'end': 2251.362, 'text': 'So here is our navbar.', 'start': 2249.942, 'duration': 1.42}, {'end': 2253.083, 'text': 'It has four items.', 'start': 2252.122, 'duration': 0.961}, {'end': 2256.724, 'text': "And it's only the search item, which is flexing.", 'start': 2253.863, 'duration': 2.861}], 'summary': 'Completion of main section, bonus lecture on responsive navbar with 4 items, 1 flexing', 'duration': 48.738, 'max_score': 2207.986, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo2207986.jpg'}, {'end': 2305.908, 'src': 'embed', 'start': 2279.535, 'weight': 4, 'content': [{'end': 2285.637, 'text': 'And the reason we used different background colors in previous examples was because it was a bit more pedagogical.', 'start': 2279.535, 'duration': 6.102}, {'end': 2289.578, 'text': 'However, by now, you should know the basics of how flexbox works.', 'start': 2286.017, 'duration': 3.561}, {'end': 2291.539, 'text': "So we don't need different colors.", 'start': 2289.758, 'duration': 1.781}, {'end': 2297.901, 'text': "In the HTML, you'll also see a few changes as the container, we're using an unordered list.", 'start': 2292.019, 'duration': 5.882}, {'end': 2301.284, 'text': 'and list items as the flex items.', 'start': 2298.801, 'duration': 2.483}, {'end': 2305.908, 'text': 'As this is a little bit more semantically correct for creating a navbar.', 'start': 2301.984, 'duration': 3.924}], 'summary': 'Flexbox basics covered using unordered list for navbar.', 'duration': 26.373, 'max_score': 2279.535, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo2279535.jpg'}, {'end': 2355.42, 'src': 'embed', 'start': 2321.561, 'weight': 1, 'content': [{'end': 2326.984, 'text': "And it works well to read about here where it starts breaking because the search suddenly can't fit anymore.", 'start': 2321.561, 'duration': 5.423}, {'end': 2337.391, 'text': 'So what we want to do here is actually allow the container to wrap and to place two items instead of four on each of the two rows.', 'start': 2327.785, 'duration': 9.606}, {'end': 2338.951, 'text': "So let's do that.", 'start': 2338.351, 'duration': 0.6}, {'end': 2342.013, 'text': 'Let over to the index dot CSS.', 'start': 2340.132, 'duration': 1.881}, {'end': 2344.335, 'text': "And we'll simply create a media query.", 'start': 2342.694, 'duration': 1.641}, {'end': 2350.599, 'text': 'set it to 600 pixels.', 'start': 2349.198, 'duration': 1.401}, {'end': 2355.42, 'text': 'And inside of it.', 'start': 2353.52, 'duration': 1.9}], 'summary': 'Adjust container to wrap and display two items on each row at 600 pixels.', 'duration': 33.859, 'max_score': 2321.561, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo2321561.jpg'}, {'end': 2537.715, 'src': 'embed', 'start': 2488.292, 'weight': 2, 'content': [{'end': 2494.717, 'text': "and what we need to do now is, at this point, target each of the items, like we're doing here.", 'start': 2488.292, 'duration': 6.425}, {'end': 2500.581, 'text': "However, instead of giving each item 50% of the row in the width, we'll give them 100%.", 'start': 2494.917, 'duration': 5.664}, {'end': 2503.503, 'text': "So I'll just copy this actually, and change this to 100%.", 'start': 2500.581, 'duration': 2.922}, {'end': 2513.511, 'text': 'As you can see, now, the breakpoint at 400 pixels to reach here gives us a clean transition from this state to this state.', 'start': 2503.503, 'duration': 10.008}, {'end': 2517.516, 'text': 'Now, finally, what I want to do is move the search all the way to the bottom,', 'start': 2513.951, 'duration': 3.565}, {'end': 2522.482, 'text': 'because they can make sense to have the search at the bottom when layout is fully vertical.', 'start': 2517.516, 'duration': 4.966}, {'end': 2531.874, 'text': "To do that, we'll target the search and simply give it an order of one and it jumped down to the bottom.", 'start': 2523.323, 'duration': 8.551}, {'end': 2537.715, 'text': "And remember, that's because by default, order is set to zero for all these items.", 'start': 2532.912, 'duration': 4.803}], 'summary': 'Adjusting item widths to 100% at 400 pixels breakpoint for clean transition, moving search to the bottom with order 1.', 'duration': 49.423, 'max_score': 2488.292, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo2488292.jpg'}], 'start': 2207.986, 'title': 'Responsive navbar design', 'summary': "Demonstrates creating a fully responsive navbar using flexbox concepts such as flex grow, flex shrink, flex basis, flex wrap, and the order property, with the search item having a flex value of one, adapting itself to various screen sizes. the chapter also includes creating a media query at 600 pixels, adjusting item layout at 400 pixels, and reordering items using the 'order' property, resulting in a clean transition and improved user experience.", 'chapters': [{'end': 2301.284, 'start': 2207.986, 'title': 'Responsive navbar with flexbox', 'summary': 'Demonstrates creating a fully responsive navbar using flexbox concepts such as flex grow, flex shrink, flex basis, flex wrap, and the order property, with the search item having a flex value of one, adapting itself to various screen sizes.', 'duration': 93.298, 'highlights': ['The chapter demonstrates creating a fully responsive navbar using flexbox concepts such as flex grow, flex shrink, flex basis, flex wrap, and the order property, with the search item having a flex value of one, adapting itself to various screen sizes.', 'The HTML for the navbar uses an unordered list as the container, and list items as the flex items, providing a practical application of the flexbox layout.', 'The chapter concludes the main section of the flexbox course, marking the completion of the main section and encouraging learners to ask questions in the q&a section if needed.']}, {'end': 2557.73, 'start': 2301.984, 'title': 'Responsive navbar design', 'summary': "Demonstrates the process of creating a responsive navbar using flexbox, including creating a media query at 600 pixels, adjusting item layout at 400 pixels, and reordering items using the 'order' property, resulting in a clean transition and improved user experience.", 'duration': 255.746, 'highlights': ["The chapter demonstrates the process of creating a responsive navbar using flexbox, including creating a media query at 600 pixels, adjusting item layout at 400 pixels, and reordering items using the 'order' property, resulting in a clean transition and improved user experience.", 'Creating a media query at 600 pixels to allow the container to wrap and place two items on each of the two rows, improving the layout for narrower screens.', 'Adjusting item layout at 400 pixels by targeting each item and giving them 100% width, resulting in a clean transition from one state to another for improved user experience.', "Reordering items using the 'order' property to move the search to the bottom for a fully vertical layout, enhancing user experience and demonstrating practical implementation of flexbox properties."]}], 'duration': 349.744, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo2207986.jpg', 'highlights': ['The chapter demonstrates creating a fully responsive navbar using flexbox concepts such as flex grow, flex shrink, flex basis, flex wrap, and the order property, with the search item having a flex value of one, adapting itself to various screen sizes.', 'Creating a media query at 600 pixels to allow the container to wrap and place two items on each of the two rows, improving the layout for narrower screens.', 'Adjusting item layout at 400 pixels by targeting each item and giving them 100% width, resulting in a clean transition from one state to another for improved user experience.', "Reordering items using the 'order' property to move the search to the bottom for a fully vertical layout, enhancing user experience and demonstrating practical implementation of flexbox properties.", 'The HTML for the navbar uses an unordered list as the container, and list items as the flex items, providing a practical application of the flexbox layout.', 'The chapter concludes the main section of the flexbox course, marking the completion of the main section and encouraging learners to ask questions in the q&a section if needed.']}, {'end': 2921.879, 'segs': [{'end': 2596.458, 'src': 'embed', 'start': 2562.213, 'weight': 0, 'content': [{'end': 2569.34, 'text': 'Hey, and welcome to this bonus lecture where we are simply going to experiment a little bit with an image grid in flexbox.', 'start': 2562.213, 'duration': 7.127}, {'end': 2575.025, 'text': "If you've seen my CSS grid, course you'll probably recognize this grid,", 'start': 2569.94, 'duration': 5.085}, {'end': 2579.91, 'text': "as I've simply phoned one of the screencasts there and changed around on things a little bit.", 'start': 2575.025, 'duration': 4.885}, {'end': 2586.613, 'text': 'And I actually do recommend you to create image grids in CSS grid as that is made for two dimensional layouts.', 'start': 2580.49, 'duration': 6.123}, {'end': 2592.836, 'text': 'While flexbox is mainly one dimensional, however, you can recreate quite a lot of cool grids in flexbox as well.', 'start': 2586.813, 'duration': 6.023}, {'end': 2596.458, 'text': "So let's just jump into it and play around a little bit.", 'start': 2592.896, 'duration': 3.562}], 'summary': 'Experiment with image grid in flexbox for one-dimensional layouts.', 'duration': 34.245, 'max_score': 2562.213, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo2562213.jpg'}, {'end': 2683.34, 'src': 'embed', 'start': 2649.374, 'weight': 1, 'content': [{'end': 2656.799, 'text': "And as you remember, to do that, we do flex wrap, and which by default is no wrap, and we're just going to remove the no.", 'start': 2649.374, 'duration': 7.425}, {'end': 2662.703, 'text': 'And boom, there, you can see now wraps to a nice little image grid.', 'start': 2657.359, 'duration': 5.344}, {'end': 2668.507, 'text': "However, as you can see, at this point, they're skewed over to the left hand side.", 'start': 2663.463, 'duration': 5.044}, {'end': 2677.835, 'text': 'So one thing we can do to make it a little bit nicer is to do justify content center.', 'start': 2669.227, 'duration': 8.608}, {'end': 2683.34, 'text': 'Now center it looks pretty decent.', 'start': 2678.515, 'duration': 4.825}], 'summary': 'Using flex wrap and justify content center to create a nice image grid.', 'duration': 33.966, 'max_score': 2649.374, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo2649374.jpg'}, {'end': 2827.695, 'src': 'embed', 'start': 2797.409, 'weight': 2, 'content': [{'end': 2804.171, 'text': 'And with the object fit cover, they take up all the width and all the height and cover the entire window.', 'start': 2797.409, 'duration': 6.762}, {'end': 2808.031, 'text': "And that'll result in you not seeing all of the images in a given time.", 'start': 2804.671, 'duration': 3.36}, {'end': 2810.512, 'text': "So if that's important, this is not a good solution.", 'start': 2808.051, 'duration': 2.461}, {'end': 2818.734, 'text': "However, if you just want most of the images to appear in the box, don't care if it's cropped a little bit, this is actually a pretty nice solution.", 'start': 2811.192, 'duration': 7.542}, {'end': 2827.695, 'text': 'So however, Xbox lays out as many items as it can on each of the rows as an evenly distributed throughout rows.', 'start': 2820.334, 'duration': 7.361}], 'summary': 'Object fit cover results in cropped images, but evenly distributed on rows.', 'duration': 30.286, 'max_score': 2797.409, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo2797409.jpg'}], 'start': 2562.213, 'title': 'Flexbox image grid', 'summary': 'Explores creating a responsive image grid using flexbox, emphasizing its flexibility in adjusting image sizes and layout for a visually appealing grid, and highlights the recommendation to use css grid for two-dimensional layouts.', 'chapters': [{'end': 2596.458, 'start': 2562.213, 'title': 'Flexbox image grid experiment', 'summary': 'Demonstrates creating an image grid in flexbox, highlighting the recommendation to use css grid for two-dimensional layouts and the flexibility of flexbox for recreating cool grids.', 'duration': 34.245, 'highlights': ["Flexbox is recommended for recreating cool grids, even though it's mainly one dimensional.", 'The chapter demonstrates creating an image grid in flexbox.', 'CSS grid is recommended for two dimensional layouts.']}, {'end': 2921.879, 'start': 2597.419, 'title': 'Flexbox image grid', 'summary': 'Explains how to create a responsive image grid using flexbox, adjusting image sizes and layout to achieve a cohesive and visually appealing grid, and allowing for flexible image scaling while maintaining aspect ratio.', 'duration': 324.46, 'highlights': ['The chapter guides on setting up a responsive image grid using flexbox, adjusting image sizes and layout to create a visually appealing grid while allowing for flexible image scaling while maintaining aspect ratio.', 'Instructions are provided on adjusting image sizes, using flex wrap to create a wraparound effect, and applying justify content center to achieve a visually centered layout.', 'The use of percentages and object fit is explained to allow for flexible image scaling and covering the entire window, with the trade-off of potential cropping for some images.', 'The chapter also details the layout behavior of flexbox, including evenly distributed items throughout rows and the impact of different image widths on the grid layout.']}], 'duration': 359.666, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/-Wlt8NRtOpo/pics/-Wlt8NRtOpo2562213.jpg', 'highlights': ['The chapter guides on setting up a responsive image grid using flexbox, adjusting image sizes and layout to create a visually appealing grid while allowing for flexible image scaling while maintaining aspect ratio.', 'Instructions are provided on adjusting image sizes, using flex wrap to create a wraparound effect, and applying justify content center to achieve a visually centered layout.', 'The use of percentages and object fit is explained to allow for flexible image scaling and covering the entire window, with the trade-off of potential cropping for some images.', 'The chapter demonstrates creating an image grid in flexbox.', 'The chapter also details the layout behavior of flexbox, including evenly distributed items throughout rows and the impact of different image widths on the grid layout.', "Flexbox is recommended for recreating cool grids, even though it's mainly one dimensional.", 'CSS grid is recommended for two dimensional layouts.']}], 'highlights': ['The lecture focuses on using markup elements like nav, divs, and ul for creating the flexbox layout.', 'The chapter demonstrates the advantage of using flexbox for creating responsive layouts, eliminating the need to manually adjust item widths when adding new items, and ensuring all items are responsive.', 'The align items property in flexbox controls the items in the cross axis, allowing options such as stretch, flex start, flex end, and center.', 'The chapter explains how setting the align items and justify content properties to flex controls the alignment of items within the container.', 'The chapter covers the properties flex basis, flex grow, and flex shrink.', 'The chapter demonstrates creating a fully responsive navbar using flexbox concepts such as flex grow, flex shrink, flex basis, flex wrap, and the order property, with the search item having a flex value of one, adapting itself to various screen sizes.', 'The chapter guides on setting up a responsive image grid using flexbox, adjusting image sizes and layout to create a visually appealing grid while allowing for flexible image scaling while maintaining aspect ratio.']}