6,381 views
Flexbox is a module in CSS that allows us to easily arrange the contents of a container element as we want. In this video we'll look at how it works, which properties you can use and what possibilities Flexbox offers! 00:00 What is Flexbox? 00:14 The example document 00:55 Creating a Flexbox container with display:flex 01:20 The basic principle of Flexbox: main axis and cross axis 01:48 Changing the direction of the main axis: flex-direction 03:25 Alignment & distribution along the main axis: justify-content 05:31 Alignment along the cross axis: align-items 09:00 Aligning individual elements: align-self 10:11 Distributing elements across multiple rows: flex-wrap 13:03 Short form for flex-direction and flex-wrap: flex-flow 13:50 Alignment of the individual rows: align-content 14:42 Dynamic sizes for Flexbox elements! 15:14 flex-basis: setting the reserved space on the main axis 16:19 Automatically expanding elements: flex-grow 18:51 Automatically shrinking elements: flex-shrink 20:02 The flexbox short form: flex 21:03 Subscribe to the channel :)