Flexbox — Week 3: Flex & Order

This week, the first lesson in the Flexbox tutorial I’ve been working through is a deep dive into the flex property. flex actually handles three properties: flex-grow, flex-shrink, and flex-basis. When we set a flex value it is handling all three of those. So for example, if we say flex: 1, we are really saying flex-grow: 1; flex-shrink: 1; flex-basis: 0. flex-basis handles the width of the item (regardless of how much extra space there might be), flex-grow decides how much extra space should grow with the items, and flex-shrink decides how much they should shrink when resized. For our exercise in this unit, we were asked to make the logout button grow ten times as fast as the home button once the container crosses the threshold of 400px. The solution to this is simple and straightforward — set the flex-grow of the logout div to 10.

The next lesson addresses source order independence, or the concept that with flexbox we have the flexibility to change the order of the items regardless of the order they are written in. For the exercise, we’ve changed the home/search/logout items to have classes named item1 (home), item2 (search), and item3 (logout). Even though they are written in that order, if we give item2 (search) an order of 1, it will jump to the farther spot where logout once was.

The exercise for this unit was to reverse the order of the items using positive and negative values for the order property. Since we are only working with three items, we are essentially just swapping the first and third items as the middle one’s place in the order will not change. To get the desired result, we will assign an order of 1 to the item1 class and an order of -1 to the item3 class.