Today I Learned

TIL, 2019-07-07, Return of the Comeback: Flexbox

Return of Flexbox Froggy

  • flex-wrap is the wrapping for flex.
  • flex-flow is the shorthand for flex-direction and flex-wrap.
  • align-items: How the items are aligned as a whole in the container.
  • align-content: Determines the spacing between lines.

  • To ensure wrapping for one line, CSS solution:
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

Fluke out

  • Sibling selector: bento ~ pickle
  • Direct descendant: plate > apple
  • Only child: plate apple:only-child, plate pickle:only-child
  • Start from the back: bento:nth-last-child(2)
  • Empty selector: Those who have no elements inside of them.
  • Not selector: apple:not('.small').
  • [attribute*="value"] selector exists.

Web Components

  • They aren’t supported by most browsers yet, so it’s nice to check out but I don’t want to learn them yet.

This project is maintained by daryllxd