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 is a row(horizontal) or column(vertical) format.

Terms and defaults

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 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

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.