Flexbox Recap

This is a recap of the CSS flexbox module covered in Web Dev I.

CSS Flexible Box or Flexbox module is a layout module which is mainly used for components that need to be displayed either in a row(horizontal) or column(vertical) format.

Terms and defaults

Before starting to work with the flex-box properties it is important to familiarize with most common terminology.

Term	Definition
flex container	The parent element to which we have added display:flex property
flex items	the direct child elements of the flex container
direction	the direction in which the flex items are arranged, the default is a row
main-axis	the main direction of the flex items, default is left to right in a row
cross-axis	the perpendicular axis to the main-axis, in this case vertical from top to bottom
flex-start	the starting point of the main-axis, default is on the left hand side
flex-end	the ending point of the main-axis, default is on the right hand side

The container

To start working with flexbox we first need to set the flex container by adding display:flex to the parent element of the elements that we want to display in a row or column using flexbox.

Direction

To control the direction of the flex items inside the flex container we can use the flex-direction property on the parent element, with one of the following values row(default), column, row-reverse, column-reverse

Each property will change the main-axis as follows:

value	main-axis	cross-axis
row	left to right ➡️	top to bottom ⬇️
row-reverse	right to left ⬅️	top to bottom ⬇️
column	top to bottom ⬇️	left to right ➡️
column-reverse	bottom to top ⬆️	left to right ➡️

Note

Based on the main-axis and cross-axis directions the values of flex-start and flex-end are defined. Example: in case of row-reverse with a right to left main-axis flex-start will be on the right side and flex-end will be on the left, this will be reversed in case of a row with left to right main-axis

Wrap

The flex-wrap property allows for the items to wrap or not wrap on the next line once there is less than required space available to fit all items in the same row or column. We can use the values wrap or nowrap(default)

Alignment

There are two axis in flex container and we can align items on both axis using different properties. Some properties are added on the flex container and others on flex items.

axis	property	values	added on
main	justify-content	flex-start(default), flex-end, center, space-between, space-around, space-evenly	flex container
cross	align-items	stretch(default), flex-start, flex-end, center, baseline	flex container
cross	align-self	stretch(default), flex-start, flex-end, center, baseline	flex item

Sizing

To control the size of the flex items we can use the flex-basis, flex-grow, flex-shrink

property	values	usage	added on
flex-basis	numeric value followed by one of the units, px, %, em, rem etc.	used to define a base width in a row or height in a column value for the flex items	flex items
flex-grow	numeric value without any unit	defines the ratio in which a flex-item will grow using the available space in respect to the sibling flex-items	flex items
flex-shrink	numeric value without any unit	defines in which ratio the flex-item will shrink in respect to its sibling flex-items when there is no additional space available	flex items

Flex Shrink Example

Order

The order property can be added to a flex-item for defining its order in the flex container.

• The default value of order for all items is 0. Hence all the items will display in order they were added to the HTML.
• The default order for row-reverse or column-reverse flex-direction will be reversed from the HTML order.
• Accepted values for the order property are -ve integers, 0, +ve integers.
• Larger the value of order property more towards the end of the main-axis a flex-item will be.
• Smaller the value of order property more towards the start of the main-axis a flex-item will be.