Flex-Box CSS Property Notes

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

  • 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
justify-content changes to vertical
align-items changes to horizontal

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

flex-flow: row wrap

align-content (similar to align-items)

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

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

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

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

#blue{
flex-grow: 4
}

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

#blue{
flex-shrink: 4
}

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A modern way to do E2E testing for Vue.js apps

Test Components in the Next.js- Part 2. Test Redux Components in different middlewares

Understanding JavaScript String Interpolation Through Email Marketing

Why 0.1 + 0.2 !== 0.3?

An Overview of two front-end frameworks: React and Vue

Load Test your NodeJS app using K6

アナウンス: Solidity++ 0.8.0 が Vite メインネットで公開

Using Compose Middleware

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

Dong Xia

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

More from Medium

CSS selectors with details example

CSS Only Accordion

Styling an input range to have different track heights before and after the thumb

Block, Element, Modifier (BEM) — CSS Methodology