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).
“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.