Skip to content

Instantly share code, notes, and snippets.

@AkiraBrand
Created August 29, 2020 13:53
Show Gist options
  • Select an option

  • Save AkiraBrand/bb7e740fcac6639b2b1e4e2be732cf8f to your computer and use it in GitHub Desktop.

Select an option

Save AkiraBrand/bb7e740fcac6639b2b1e4e2be732cf8f to your computer and use it in GitHub Desktop.

PARENT CONTAINER

-distributed items in space -what order they go in -space between boxes/how tall they are, etc

justify content: this is for the row

justify-content: flex-start; puts all boxes toward the beginning (left to right)

justify-content: flex-end puts all the boxes toward the right (like reading hebrew)

justify-content: space between; takes all boxes, makes the spaces between them equal

justify-content: space around; takes about 1/2 of the space between the boxes and puts them on either side (kind of like adding padding)

justify-content: space evenly; has the same space between the boxes AND the boxes and the edge

align items: this is the cross-axis, up and down

align-iems: flex-start; puts boxes toward the top of the page and reduces the boxes to the size of the content

align-items: flex-end; puts boxes toward the bottom of the page and reduces the boxes to size of the content

align-items: center; centers things horizontally and vertically in space, makes boxes the size of content. oooo.

align-items: stretch; stretches boxes to fill ALL the vertical space

etc:

flex-flow : flex wrap -- wraps all the elements like a snake on the page

CHILDREN/FLEX ITEMS (like the CELLS)

-the ordering -how WIDE they are -how they change size over dimensions

order: 2; can be any number, pulls the items out and puts them in the 2nd place after the other stuff. by default everything has order property of 1

flex-basis: 25% ; this is "width", its less set in stone than an actual width. its like "hey, get as close to 25% as you can" wheras width is always exactly 25% . use this instead of width on flex-items

flex: 0 1 25

default is flex: 0 1 auto;

first number is grow prop, second is shrink prop. its how fast they grow and shrink. this grows the same as other stuff on the page (0)

maybe one wants to grow twice as fast as other boxes --

flex 2 1 25 this one says grow twice as fast as other stuff

this is super cool and looks good for lots of images etc

the last number is flex basis

Questions to still answer: what is flex basis? (the third number)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment