css

Flexbox

display: flex;

Layout children along a single axis. Horizontal or vertical, a column or a row. Horizontal by default. Wrapping is optional.

flex-direction: row; /* side-to-side, same as text direction */
flex-direction: row-reverse; /* side-to-side, opposite direction */
flex-direction: column; /* top-to-bottom */
flex-direction: column-reverse; /* bottom-to-top */

This direction is the "main axis" according to the spec. The secondary or perpendicular axis is called the "cross axis".

justify-content: flex-start;

Align children along the main axis.

align-items: stretch | flex-start | flex-end | center | baseline | first
	baseline | last baseline | start | end | self-start | self-end;

Align children along the cross axis.

align-content: flex-start | flex-end | center | space-between | space-around |
	space-evenly | stretch | start | end | baseline | first baseline | last
	baseline;

When flex items wrap, this determines the distribution along the cross axis. For example, for flex-direction: row, the main axis is side-to-side. If it wraps, then align-content will affect the space between the rows top-to-bottom.

More flexbox:

CSS Grid

fr is a relative unit that represents some fraction of the available space in the container.

Unicode

code symbol
'\2013\20' endash: –

Media queries

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

Breakpoints

Organization

For example:

/* || General styles */
/* || Typography */
/* || Utilities */
/* || Site Wide */
/* || Header and Main Navigation */
/* || Other special cases */