CSS ESSENTIAL - Layout & Position

1. CSS Position

1.1. Syntax

1.1.1. position:

1.1.1.1. static | absolute | fixed | relative | sticky | initial | inherit

1.1.1.1.1. example

2. CSS Float

2.1. Syntax

2.1.1. Float:

2.1.1.1. left | none | right

2.1.1.1.1. example

3. CSS Flexbox

3.1. Syntax

3.1.1. display: flex;

3.1.1.1. example

3.1.1.1.1. display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between;

4. Layout Example

5. media queries

5.1. syntax

5.1.1. using min-width

5.1.1.1. @media screen and (min-width: 320px) { insert your css}

5.1.2. using max-width

5.1.2.1. @media screen and (max-width: 320px) {insert your css}

5.2. breakpoints

5.2.1. standard

5.2.1.1. mobile 320px

5.2.1.2. tablet 768px

5.2.1.3. desktop 1024px