Notes on Day 5 of 30 Days of JavaScript

• notes • series • javascript • css • javascript30

Table of Contents

Lessons Learned

Flex alignment properties

These four alignment properties of CSS flex might be confusing at first but once we get familiar with their characteristics, it will be easier to use them in your projects.

Property Definition (Basic) Values
align-content Aligns items on the parallel axis (x-axis) of the flex container. flex-start, flex-end, center, space-between, space-around, stretch
justify-content Justifies items on the parallel axis (x-axis) of the flex container. flex-start, flex-end, center, space-between, space-around, stretch
align-items Aligns items on the perpendicular axis (y-axis) of the flex container. auto, flex-start, flex-end, center, left, right
justify-items Justifies items on the perpendicular axis (y-axis) of the flex container. auto, flex-start, flex-end, center, left, right
align-self Similar to align-items but overrides it and applies on an individual level. auto, flex-start, flex-end, center, baseline, stretch
justify-self Similar to justify-items but overrides it and justifies on an individual level. auto, flex-start, flex-end, center, baseline, stretch

DOMTokenList.toggle()

This method adds a token if it doesn’t exist in the list; otherwise it will remove the token. It is usually used in manipulating CSS classes of elements.

nav li {
  background: #F9F9F9;
  color: #292B30
}
nav li.active {
  background: #292B30;
  color: #F9F9F9;
}

document.querySelectorAll('nav li')
  .forEach(item => item.addEventListener('click', this.classList.toggle('active')))

References

Twitter, LinkedIn