Chapter 6.4: Flexible Boxes

The flex display option is short for flexible box, though when discussing It with CSS developers they will often refer to these as flex boxes. This is one of the rare cases where the name matches what the element does. Flex boxes allow you to align and distribute the space it takes up between multiple elements. The best way to think about it is a container that will resize components to fill available space by growing or shrinking them.

The first step to using a flex box is to set the display type to flex. There is also an inline-flex option as well, which tries to fit the box inline using just the sizes of the items. We then need a way to determine how we want to lay out the components within the box. This is done with the Justify-contents attribute which has several different potential values.

• normal your default of fitting everything in the line.
• space-between add space between the components but not the edges.
• space-around add space between components and edges (half the gap on each end).
• space-evenly divide gap between components and edges evenly (all same).
• stretch any component that can be grown/shrunk will be to fill space using max/min values.
• center align component in center, with edges being empty
• left align components to the left
• right align components to the right
• start align components to the start as determined by the languages writing direction
• flex-start aligns components to the start of the flex container based on axis (horizontal or vertical)
• end components to the end as determined by the languages writing direction
• flex-end aligns components to the end of the flex container based on axis (horizontal or vertical)

Often we want there to be a gap between the components. To allow for this, the gap attribute lets you set the gap between components. The gap attribute lets you specify the column gap and the row gap. Based on the justification mode selected, this can be adjusted to spread out the components appropriately.

Since blocks are normally laid out vertically, I don’t fully understand the need to specify the direction but you do have that option, and can even have things laid out right to left or bottom to top. This Is done by using the flex-direction attribute. Your options here are column, row, column-reverse, and row-reverse.

You can also align the items in the container by specifying the alignment using the align-items attribute. Your options here are left, right, and center.

While we will often use a flex box to make sure things fit into a line, sometime, especially if we are designing for radically different device types, we may want to allow form multiple rows. This can be done by setting the flex-wrap attribute. Possible values are wrap or no-wrap. You can combine the align-items attribute with the flex-wrap attribute by using the flex-flow attribute. The first parameter of flex-flow is the direction, the second parameter is the item alignment.

To give you even more control over the layout of items you can add a flex attribute to elements that are going to be part of the flex box container. This consists of three parameters, the growth weight, shrink weight, and basis. These can be set individually using flex-grow, flex-shrink, and flex-basis. Adjustments will be applied taking weight into account. The basis is the desired size of the component.

To understand weights, lets say we had 3 component with the left and right having a growth of 1 while the middle had a growth of 2. The total weight is 4 so for every 4 units that needed to be grown, the outer components would grow by 1 unit, while the middle component would grow by 2 units. So if we had 20 pixels of the flex box to fill, the left would grow by 5 pixels, the middle would grow by 10 pixels, and the right would grow by 5 pixels. To control the minimum and maximum size of the components, you can use the min-width, max-width, min-height, max-height attributes to control the size range.

Components can also control their contents by using the justify-content attribute with options of left, right, and center. You could also use the align-items with the same options.

It is also possible to have flex boxes inside flex boxes. In these cases the outer container sets the sizes of the inside containers which then lay out their contents based on the size of the container they are in. In theory, you can go as deep as you want with containers inside containers.

This is all great for even more challenging layout options, there is the grid, which we will look at next.