Flex-Box CSS Property Notes

A quick summary of flex box properties.

justify-content / align-items / flex-direction / flex-wrap / flex-flow / align-content / order / align-self / align-content / flex-basis / flex-grow / flex-shrink

#main{
display: flex;

The Container / Parent

justify-content (positioning horizontal)

  • flex-start: (default) Items align to the left side of the container.
  • flex-end: Items align to the right side of the container.
  • center: Items align at the center of the container.
  • space-between: Items display with equal spacing between them. (first and last item will be at the edge of the page)
  • space-around: Items display with equal spacing around them. (first and last item will have space between it and the edge of the page)

align-items (positioning vertical)

align-items how the items as a whole are aligned within the container

  • flex-start: Items align to the top of the container.
  • flex-end: Items align to the bottom of the container.
  • center: Items align at the vertical center of the container.
  • baseline: Items display at the baseline of the container.
  • stretch: (default) Items are stretched to fit the container.

flex-direction

  • row: Items are placed the same as the text direction.
  • row-reverse: Items are placed opposite to the text direction.
  • column: Items are placed top to bottom.
  • column-reverse: Items are placed bottom to top.
*** when flex-direction:column; 
both the justify-content and align-items for flipped

flex-wrap

  • nowrap: Every item is fit to a single line.
  • wrap: Items wrap around to additional lines.
  • wrap-reverse: Items wrap around to additional lines in reverse.

flex-flow

Shorthand, combines both flex-direction and flex-wrap

flex-flow: row wrap

align-content (similar to align-items)

align-content determines the spacing between lines. Use in conjunction with flex-wrap, since it modifies the behavior of the flex-wrap property. Will override align-items if both are used.

*Includes 2 more properties not in align-items space-between and space-around.

  • flex-start: Lines are packed at the top of the container.
  • flex-end: Lines are packed at the bottom of the container.
  • center: Lines are packed at the vertical center of the container.
  • space-between: Lines display with equal spacing between them.*
  • space-around: Lines display with equal spacing around them.*
  • stretch: Lines are stretched to fit the container.

Child of the Container

order(items in the container )

Takes in a whole number, negative or positive. Will display Pink, Red, Green, Blue.

#myRedDIV   {order: 2;}
#myBlueDIV {order: 4;}
#myGreenDIV {order: 3;}
#myPinkDIV {order: 1;}

align-self (same as align-items but only apply to ONE item)

  • flex-start: Items align to the top of the container.
  • flex-end: Items align to the bottom of the container.
  • center: Items align at the vertical center of the container.
  • baseline: Items display at the baseline of the container.
  • stretch: (default) Items are stretched to fit the container.

flex-basis(items in the container)

The flex-basis property specifies the initial length of a flexible item. The default size of the item before any allocation of the available spacing.

#main div {
flex-basis: 50px;
}

flex-grow (a child or item of the container)

Will take up the available empty space in the container. The number can only be positive.

A number specifying how much the item will grow relative to the rest of the flexible items. Default value is 0

#blue{
flex-grow: 4
}

flex-shrink (a child or item of the container)

Will shrink an item and reallocate the remaining equally to the other items.

The flex-shrink property specifies how the item will shrink relative to the rest of the flexible items inside the same container. Default value 0.

#blue{
flex-shrink: 4
}

Copy and Paste what’s on my mind. Perfect.