Flex layout: Equally distributed columns

- [Instructor] Use of the CSS flexbox module…is one of the most important changes in Bootstrap 4.…It not only avoids the need to clear floats,…it also offers other possibilities…such as equally distributed columns.…I've added some dummy text to each…of the six columns in the row that we created…in the previous video.…On an extra small device, the columns stretch…the full width of the row…and they're stacked vertically.…The great advantage of Bootstrap using flexbox…becomes apparent when I click…the visual media queries bar to resize…the document window for the breakpoint…for small devices.…

Even though the text is of varying lengths,…the columns are laid out two abreast.…In Bootstrap 3 which uses floats for layout,…this third column would be stuck below the second one…because it would float up into this empty space,…and the length of the first column…would prevent it from moving all the way…across to the left.…In Bootstrap 3, you would need to insert…an extra div to clear the float,…but that's not necessary in Bootstrap 4…