Mikke.Learns

Coding log 05.07.19

May 6th, 2019

Day three of learning CSS Flexbox.

Last time we learned about how to use justify-content to align flex items along the main axis. Flex containers also have a cross axis, which is the opposite of the main axis. So for rows, it’s a vertical line and for columns it’s a horizontal line.

To align flex items along the cross axis, we use “align-items”. The properties are as follows:

  • flex-start: aligns flex items to the start of the flex container (top for rows and left for columns)

  • flex-end: aligns items to the end of the container (bottom for rows and right for columns).

  • center: aligns items to the center in both rows and columns.

  • stretch: Stretches the items to fill the flex container.

  • baseline: Align the flexitems to their baselines (the line the letters sit on).

Wrap

“flex-wrap” is another useful CSS property that helps us split a flex item into multiple rows or columns.

By default all flex items are being pushed together in one row or column. Yet if we use flex-item, we can decide the breakpoint of where the wrapping happens. Note that the size of the items and the size of the container.

Flex-wrap has the following options:

  • nowrap: the default setting. No wrapping.

  • wrap: wraps items from left to right if they are in a row and top to bottom if they are in a column.

  • wrap-reverse: opposite of the one over. From bottom top if in a row and right to left if a column.