Actions

Flexbox

De erg

CASCADIA STYLE SHEET

fb designed w/ responsiveness in mind

layout mode → turning html into the actual "image" via our webengine processing it (how big, where the elements are, how they interact, etc..)

b4, we used blocks and floats if we wanted to get out the flow. multi columns etc..

flexbox killed css:float

container, display flex everything child becomes a flex item

flex vs gridd !!!

  • flex micro components, grid bigger picture
flex start, flex end

left → right | top - bottom row via default, acting as inline blocks. the axis can be rotated + reverse!!!

flex-wrap

wrap, no-wrap, wrap reverse single or multiline container !

justify-content

flex-start (default) flex-end, center, space-betwee,; space-around,

align-items

opposite axis!! flex-start, flex-end, center, baseline !, stretch,

align content

stretch defautlf, start, end,

= flex items

order

flex

<flex-grow> <flex-shrink> <flex-basis> flex-basis:auto; if 200px, size b4 the flexbox, will be overriden via grow and shrink


more

  • media queries
  • css reset

reset vs * vs init vs normalize vs html5doctor, link tag,@import, ...

  • css alignement
  • css borde-box






reasearch path