Actions

Flexbox

De erg

Révision datée du 10 juin 2020 à 13:20 par Copyright (discussion | contributions) (Page créée avec « 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 elem... »)
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)

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