CSS Properties

Table of Contents

align-items: reference

box-sizing: reference

html {
  box-sizing: border-box;
}

margin: reference

margin: <top> <right> <bottom> <left>;
margin: <top,bottom> <right,left>;
margin: <all>;
margin: auto; /* set the margin to horizontally center the element */

position: reference

text-size-adjust: reference

‑webkit‑text‑size‑adjust: reference

Mobile Safari on iPhone will automatically increase the size of small text. When this behavior is undesirable, you can turn this feature off by ‑webkit‑text‑size‑adjust: 100%.

Don't use none instead of 100%. It will disable text resizing entirely.

/*
  The default value 'auto' makes code block inconsistent in font sizes
  on some iOS devices.
*/
-webkit-text-size-adjust: 100%;

float: right; vs margin-left: auto; discussion

text-align: center; vs margin: auto; discussion

text-align: center;

To center the content of an element ( text, images etc.) Although it's possible to center an element using text-align alongside display: inline;, It's not recommended.

margin: auto;

To center a element with a known width

Flexbox tutorial

flex-flow = flex-direction + flex-wrap

flex

flex-grow flex-shrink flex-basis

flex-grow

When there is some space available, items share the space based on the ratio of this value. When flex-grow is 0, so items will not grow larger than their flex-basis size.

flex-shrink

Whene there is less space than required, items shrink their spaces based on the ratio of this value

flex-basis

The default size of the item.

Grid tutorial

Links