#4 HTML & CSS [know-how]

#4 HTML & CSS [know-how]

• 1.
  Diving deep intothe core of the HTML & CSS #4 The Flexbox Layout
• 2.
  @dalibor_gogic [object Object]
• 3.
  The Flexbox Layout
• 4.
  The Flexbox Layout(Flexible Box) module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic.
• 5.
  The flexbox layoutis direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based).
• 7.
  .container { display: flex| inline-flex; } https://codepen.io/daliborgogic/pen/VxqLJK
• 8.
  .container { flex-direction: row| row-reverse | column | column-reverse; } https://codepen.io/daliborgogic/pen/QrJeEj
• 9.
  .container { flex-wrap: nowrap| wrap | wrap-reverse; } https://codepen.io/daliborgogic/pen/vjvBmN
• 10.
  (Applies to: parentflex container element) This is a shorthand flex-direction and flex-wrap properties, which together define the flex container's main and cross axes. Default is row nowrap. flex-flow: <'flex-direction'> || <'flex-wrap'>; https://codepen.io/daliborgogic/pen/aGPoYg
• 11.
  .container { justify-content: flex-start| flex-end | center | space-between | space-around | space-evenly; } https://codepen.io/daliborgogic/pen/gzZOOX
• 12.
  .container { align-items: flex-start| flex-end | center | baseline | stretch; } https://codepen.io/daliborgogic/pen/odJNLB
• 13.
  .container { align-content: flex-start| flex-end | center | space-between | space-around | stretch; } https://codepen.io/daliborgogic/pen/aGPzby
• 14.
  .item { order: <integer>;/* default is 0 */ } https://codepen.io/daliborgogic/pen/odJgKO
• 15.
  .item { flex-grow: <number>;/* default 0 */ } https://codepen.io/daliborgogic/pen/GdPJqo
• 16.
  .item { flex-shrink: <number>;/* default 1 */ } https://codepen.io/daliborgogic/pen/PeXqpb
• 17.
  .item { flex-basis: <length>| auto; /* default auto */ } https://codepen.io/daliborgogic/pen/PeXqpb
• 18.
  This is theshorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto. .item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } https://codepen.io/daliborgogic/pen/PeXqpb
• 19.
  .item { align-self: auto| flex-start | flex-end | center | baseline | stretch; } https://codepen.io/daliborgogic/pen/rvoVob
• 20.
  This slide [is]intentionally left blank.