CSS Flex Box

The Basics of Flexbox

Display

  • flex→ block element
  • inline-flex →inline element. It grows if there is not enough space to contain the children.
Flex directions
  • row : Arranges the elements from left to right
  • row-reverse: Reverses the order of elements in a row disposition
  • column: Arranges the elements from top to bottom
  • column-reverse: Reverses the orders of elements in a column disposition

Flex Flow

Justify content

  • flex-start : Elements are aligned to the left (similar to inline elements with text-align: left )
  • flex-end: Elements are aligned to the right (similar to inline elements with text-align: right )
  • center: Elements are centered (similar to inline elements with text-align: center )
  • space-around: Every element will be rendered with the same amount of space around each item.
  • space-between: Just like space-around, except the elements will be separated by the same distance and there will be no space near either edge of the wrapper.

Align items

  • flex-start: Elements are vertically aligned to the top of the wrapper.
  • flex-end: Elements are vertically aligned to the bottom of the wrapper.
  • center: Elements are centered vertically within the wrapper.
  • stretch: Forces the elements to occupy the full height (when applied to a row) and the full width (when applied to a column) of the wrapper.
  • baseline: Vertically aligns the elements to their actual baselines.

Align content

  • flex-start: Rows are vertically aligned to the top (i.e., stacked from the top of the wrapper).
  • flex-end: Rows are vertically aligned to the bottom (i.e., stacked from the bottom of the wrapper).
  • center: Rows are centered in the wrapper vertically.
  • stretch : In general, this property stretches the elements to utilize the entire vertical height of the wrapper. However, if we have set some specific height of the elements, that height will be honored and the remaining vertical space (in that row, below that element) will be empty.
  • space-around: Every row will be rendered with the same amount of space around itself vertically (i.e., below and above itself). Note that the space between two rows will, therefore, be double the space between the top and bottom rows and the edges of the wrapper.
  • space-between: Just like space-around, except the elements will be separated by the same distance and there will be no space on the top and bottom edges of the wrapper.

Flex grow

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store