Summary 4

Topic #1: Hello Flexbox!

We can give a lot of thanks to the Flexbox model for providing an easier way to design a layout structure that is not only flexible but also reactive. Using this new system allows for getting rid of using the float or positioning aspects of CSS. In order to begin using a Flexbox model you need to define the flex container.

Topic #2: Inside the Flexbox

When creating a flexbox container you need to define the display as “flex” in order for the box to become flexible. In order to define the boxes within the container as either vertical or horizontal you need to set “flex-direction” as columns or rows. This can go into even more detail when it comes to reverse order, or even wrapping in order to create more than one row or column.

Topic #3: Properties, yay!

When it comes to item-properties you can get even more customizable with your flex containers. When working with the boxes you can use “flex-grow” to make a specific box stretch larger or smaller. There are many properties like align, shrink, basis, and order.