How to align the last row to the grid with CSS Flexbox?

To align the last row to the grid with CSS Flexbox, we use the :after selector.

For instance, we write

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

to add the flex: auto; to the part of the page after the element with class grid to align the last row to the grid.

How to copy to the clipboard on button click with JavaScript?

To copy to the clipboard on button click with JavaScript, we use the Clipboard API.

For instance, wwe write

document.querySelector(".copy-text").addEventListener("click", async () => {
  await navigator.clipboard.writeText(textToCopy);
  window.alert("Success! The text was copied to your clipboard");
});

to call navigator.clipboard.writeText with the textToCopy to copy the string to the clipboard.

We call addEventListener to add the function with the code as the click listener for the element with class copy-text.

How to hide an element when printing a web page with CSS?

To hide an element when printing a web page with CSS, we use the @media print query.

For instance, we write

@media print {
  .no-print,
  .no-print * {
    display: none !important;
  }
}

to hide elements with class .no-print and everything inside them with display: none when the page is being printed with the @media print rule.

How to center a position: fixed element with CSS?

To center a position: fixed element with CSS, we set the transform property.

For instance, we write

div {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

to set the left and top to 50% to move the element near the center.

Then we add transform: translate(-50%, -50%); to move the div to the center.

How to use .otf fonts on web browsers with CSS?

To use .otf fonts on web browsers with CSS, we use the @font-face rule.

For instance, we write

@font-face {
  font-family: GraublauWeb;
  src: url("path/GraublauWeb.otf") format("opentype");
}

@font-face {
  font-family: GraublauWeb;
  font-weight: bold;
  src: url("path/GraublauWebBold.otf") format("opentype");
}

to add the fonts with the @font-face rule.

We add the fonts by setting the src property to the font URL.

How to center an image using text-align center with CSS?

To center an image using text-align center with CSS, we set the margin.

For instance, we write

<div style="border: 1px solid black">
  <img class="center" src="https://picsum.photos/300/300" />
</div>

to add a div with an image.

Then we write

img.center {
  display: block;
  margin: 0 auto;
}

to center the image with margin: 0 auto;.