Notes: The table contains most common CSS properties/values. The browsers might ignore some of the properties!
Most off the properties have 'initial', 'unset' and 'inherit' values:
| Property | Value | Description | Comments |
|---|---|---|---|
| Standard positioning | |||
| position | fixed | absolute | relative | static | sticky | A box can be positioned with the top, right, bottom, and left properties. These will have different effects depending on the value of position |
Static - Follows the normal flow in a layout. top, right, bottom, and left have no effect. Default.
Relative - Position is offset from the box’s initial position. Absolute - Box is taken out of the flow and positioned in relation to its containing box. Fixed - The same as absolute only the box will remain fixed in the viewport and will not scroll with the rest of the page’s content. |
| top | [length] | [percentage] | auto | For relative positioned boxes, top defines how far the box is offset from its initial top edge. So a positive value will, in fact, shift the box down.
For absolute (or fixed) position boxes, top defines how far the box is offset from the top edge of its containing block (being the page or a containing positioned box). |
|
| right | [length] | [percentage] | auto | For relative positioned boxes, right defines how far the box is offset from its initial right edge. So a positive value will, in fact, shift the box left.
For absolute (or fixed) position boxes, right defines how far the box is offset from the right edge of its containing block (being the page or a containing positioned box). |
|
| bottom | [length] | [percentage] | auto | For relative positioned boxes, bottom defines how far the box is offset from its initial bottom edge. So a positive value will, in fact, shift the box up.
For absolute (or fixed) position boxes, bottom defines how far the box is offset from the bottom edge of its containing block (being the page or a containing positioned box). |
|
| left | [length] | [percentage] | auto | For relative positioned boxes, left defines how far the box is offset from its initial left edge. So a positive value will, in fact, shift the box right.
For absolute (or fixed) position boxes, left defines how far the box is offset from the left edge of its containing block (being the page or a containing positioned box). |
|
| float | left | right | none | Defines how a box should float, shifting it to the right or left with surrounding content flowing around it. | |
| clear | left | right | both | none | Defines how a box following a floated box should behave. | |
| z-index | [integer] | auto | Defines the placement of a positioned box in the z-axis. | The higher the number, the higher the box will be in the stack (the “closer” it will be to the user as they look at the display). |
| FlexBox | |||
| display | flex | inline-flex | Defines block or inline flex. | |
| flex-direction | row | row-reverse | column | column-reverse | Defines how flex items are placed in the flex container. | row (default): left to right in ltr; right to left in rtl |
| flex-wrap | nowrap | wrap | wrap-reverse | Controls whether the flex container is single-line or multi-line. | By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property. |
| flex-flow | <'flex-direction'> || <'flex-wrap'> | Shorthand | |
| justify-content | flex-start | flex-end | center | space-between | space-around | Aligns flex items along the main axis of the current line of the flex container. | flex-start (default) |
| align-items | flex-start | flex-end | center | baseline | stretch | Is similar to the justify-content property, but instead of aligning flex items in the main axis, align-items is used to align flex items in the cross-axis (perpendicular to the main axis). | stretch (default): stretch to fill the container (still respect min-width/max-width). Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis). |
| align-content | flex-start | flex-end | center | space-between | space-around | stretch | Aligns a flex container's lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. | stretch (default). This property has no effect when there is only one line of flex items. |
| order | The order property controls the order in which flex items appear within their flex container. | The initial order of all flex items is zero (0). | |
| align-self | auto | flex-start | flex-end | center | baseline | stretch | align-items sets the default alignment for all of the flex container’s items. The align-self property allows this default alignment to be overridden for individual flex items. | auto (default) |
| flex-grow | <number> | Sets the flex grow factor of a flex item. | Default value is 0, and negative numbers are invalid. An item with flex-grow: 2 will get twice the available space than an item with flex-grow: 1. |
| flex-shrink | <number> | Sets the flex shrink factor of a flex item. | Default value is 1. Negative numbers are invalid. |
| flex-basis | auto | <'width'> | Takes the same values as the width property, and sets the flex basis: the initial main size (see concepts and terminology) of the flex item, before free space is distributed according to the flex factors. The auto keyword means "look at my width or height property". | |
| flex | none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] | Shorthand property | It is recommended that you use this shorthand property. |
| Grid Layout | |||
| display | grid | inline-grid | subgrid | Defines block, inline or nested grid. | |
| Grid Container | |||
| Grid Item | |||