Css3 Cheatsheet 2017 Emezeta

(1)

all:

RESETTING ALL PROPERTIES COLOR COMPONENTS NUMERIC FORMAT COLOR MODELS COLOR PROPERTIES

PSEUDOELEMENTS

ﬁrst line of text element

::ﬁrst-line

ﬁrst letter of text element

::ﬁrst-letter PSEUDOCLASSES

links that have not yet been visited :link

:visited links that has been visited

LINKS

user move mouse/pointer over element :hover

:activeelement is being activated by user

USER A

CTION

:focus element has the focus (foreground) on/off input state :enabled :disabled

USER INTERF

A

CE

:checked elements toggled "on" by user :indeterminate input on indeterminate state :read-only :read-write readonly input or modiﬁable :placeholder-shown inputs that shows placeholder at now :default default elements for form (input, option, ...) :valid :invalid userdata pass/not pass check validation :in-range :out-of-range userdata in range/out of range :required :optional elements required/optional for submit ATTRIBUTES

elements with attr attribute present [attr]

elements with attr= attribute with value val

[attr="val"]

elements with attr~= that contains val

[attr~="val"] "abc val xyz" elements with attr|= that contains es-*

[attr|="es"] "en-US es-ES" "val"

elements with attr*= that includes val

[attr*="val"] "equivalent-is-" elements with attr$= that ends with val

[attr$="val"] "in-interval" elements with attr^= that begins with val

[attr^="val"] "value-is-..." [attr="..." i] IGNORE CASE SENSITIVE

transparent currentColor GENERAL SYNTAX

CSS Syntax

Created by @Manz ( http://twitter.com/Manz ) https://lenguajecss.com/

CSS3

CHEAT SHEET

WEB DESIGN

tag [attributes] #id .class :pseudoclass ::pseudoelement {

selector : value ; }

SELECTORS & COMBINATORS CSS Selectors S

inner div elements inside of div (descendant) element with id="unique"

#

div div direct childs of div (child)

> div > div

adjacents elements (adjacent sibling)

+ div + div

siblings elements at same level (general sibling)

~ div ~ div

#unique

STRUCTURAL

ﬁrst child of group of elements

:ﬁrst-child

:last-child last child of group of elements :nth-child(n) nth_{child of group of elements} :nth-last-child(n) last nth_{child of group of elements}

CHILD ELEMENTS

:only-child unique child

:nth-child(1) :nth-last-child(1) odd even expr :ﬁrst-child:last-child

ﬁrst child of same type

:ﬁrst-of-type

:last-of-type last child of same type :nth-of-type(n)nth_{child of same type}

:nth-last-of-type(n) last nth_{child (same type)}

CHILD OF S

AME TYPE

:only-of-type unique child (same type) :root root element of the document :empty element without contents

O

THERS

:not(x) not match by x selector

O T H E R S n

:target is the target of anchor URL :lang(x)elements in x language

all elements inside of div (universal)

* div *

elements with class="c1"

. .c1 C C CSS Colors alpha 1 opacity: color: color KEYWORDS colorkey red RGB( ,green,blue) red_hex # green_hex blue_hex hue HSL( ,saturation,lightness) WITH ALPHA CHANNEL

red

RGBA( green blue )

hue

HSLA( ,saturation,lightness

, , ,alpha

) ,alpha

RGB(65, 106, 225)

#416AE1 short form: #46E

HSL(159, 185, 145)

EXAMPLES

red green blue numeric value between [0 ... 255]

red_hex green_hex blue_hex hexadecimal value [00 ... FF] hue numeric value (degrees) between [0 ... 360deg]

saturation lightness percentage values [0%...100%] alpha number value between [0.0 ... 1.0]

RGBA(65, 106, 225, 0.5) HSLA(159, 185, 145, 1) EXAMPLES ABSOLUTE SIZES cm centimeters FONT-RELATIVE SIZES

em computed value on current ex x-height of lowercase "x" ch advance measure of "0" glyph COMMON VALUES

initial

CSS Values & Units V

property's initial value inherit computed value on parent unset initial or inherit (depending)

rem computed value on root elem

vw viewport width % vh viewport height % vmin smaller (vw or vh) vmax larger (vw or vh) VIEWPORT SIZES mm millimeters Q quarter-mm in inches pc picas pt points px pixels ANGLES deg degrees [0..360] grad gradians [0..400] rad radians [0..6.28] rad turns [0.0..1.0] DURATIONS s seconds ms millisecs MATHEMATICAL EXPRESSIONS value1 op calc( value2...) EXAMPLE calc(200px + 10%) ~ ~ ~ keyword shorthand value userdata value default value wide unsupport pseudoclass pseudoelement legend detailed value optional keyword USING var( varname ...) EXAMPLE calc(var(--size, 50px) * 2); -- ,fallback DECLARING

CUSTOM PROPERTIES (CSS VARIABLES) -- varname ; EXAMPLE --size: 100px; : value PERCENTAGES value % EXAMPLE 75% initial inherit unset

IMPORTANT value !important EXAMPLE color:red!important; property: COMMENTS (ANNOTATIONS) comment EXAMPLE /* IE sucks */ /* */ OTHERS monochrome number MIN MAX COLORS color number width VIEWPORT SIZE ASPECT RATIO CSS Media Features M size height size device-width DEVICE SIZE size device-height size aspect-ratio ratio device-aspect-ratio ratio color-index number

MIN MAX MIN MAX

resolution dpi/dpcm

MIN MAX

orientation portrait landscape scan progressive interlace

grid number EXAMPLES device-min-width: 640px device-aspect-ratio: 16/9 max-color-index:256 min-resolution:300dpi min-monochrome:2 grid:1

CSS SYNTAX, COLORS & UNITS

COLOR EXAMPLE

237+ 63+ 0 =RGB(237, 63, 0) RGB

11 + 255+ 119 =HSL(11, 255, 119) HSL

(2)

EXAMPLE @media screen and (max-width: 640px) { ... }

@font-face { font-family: src:

font

url( ﬁle.woff ) format("woff") unicode-range: U+000-27FF

url( ﬁle.ttf ) format("truetype") } ; , ; ; EDGE EFFECTS SPACING

ALIGNMENT & JUSTIFICATION LINE BREAKING & WORD BOUNDARIES WHITE SPACES

EMPHASIS MARKS LEVEL 2 (LEGACY)

none

text-decoration: underline overline line-through

text-emphasis: style color

CSS3

CHEAT SHEET

WEB DESIGN

normal size letter-spacing: TRANSFORMING TEXT CSS Text L3 T manual none hyphens: auto normal

overﬂow-wrap: break-word

8

tab-size: number

left

text-align: right center justify auto

text-align-last: start end left right center justify

size

text-indent: hanging each-line auto

text-justify: none inter-word distribute none

text-transform: capitalize uppercase lowercase full-width normal

white-space: pre nowrap pre-wrap pre-line

normal

word-break: keep-all break-all

normal word-spacing: size

normal

word-wrap: break-word

none

hanging-punctuation: ﬁrst last force-end allow-end auto

line-break: loose normal strict

LEVEL 3

CSS Text Decoration T

none text-emphasis-style:

dot circle double-circle triangle none

text-decoration-line: underline overline line-through blink color

text-decoration-color: currentColor

text-decoration-style: solid double dotted dashed wavy

text-decoration: line style color

text-decoration-skip: none objects spaces ink edges box-decoration

text-underline-position: auto under left right

sesame string color text-emphasis-color: currentColor none font1 xx-small

normal italic oblique font-family: font-size: font-style: FONTS (TYPOGRAPHY) Fonts F

font:style variant weight line-height family normal bold

font-weight:

font2

, ,font3...,genericfont

x-small small medium large x-large xx-large smaller larger lighter bolder 100 200 300 400 500 600 700 800 900 none number font-size-adjust: size/ stretch

caption icon menu message-box small-caption status-bar font-synthesis: none weight style

ABS

REL

ABS

font-variant: none small-caps

text-emphasis-position: over under left right

text-shadow: nonepos-xpos-y blur color TEXT SHADOW

GENERIC FONT

EXAMPLE font-family: Verdana, Arial, sans-serif;

serif sans-serif cursive fantasy monospace

SPEECH

VOICE CHARACTERISTICS MIXING/SPATIAL pause: before after

VOLUME/SPEAK Speech Media S

volume:number silent x-softsoft mediumloudx-loud speak: normal none spell-out

%

pause-before: 0 time % pause-after: 0 time %

PAUSE

play-during: auto none URI url( snd.mp3)mix repeat azimuth:angle center left-side far-left left center-left

center-right right

far-right right-side

behind leftwards rightwards

LFT

RGT

elevation:angle ABS below level above RELlower higher

speech-rate: number medium

faster slower x-slow

REL

ABS slow fast x-fast

voice-family: voice1 voice2, ,voice3...,genericvoice pitch: frequency x-low low mediumhigh x-high pitch-range: 50number

richness: 50number stress: 50number

speak-punctuation: none code speak-numeral: continuous digits speak-header: once always

cue:before after cue-before: none cue-after: none

URIurl( snd.mp3) URIurl( snd.mp3)

GENERIC VOICE

EXAMPLE voice-family: Romeo, male;

male female child CUE BREAKING WORDS https://fonts.googleapis.com/css?family=Open+Sans:300,400|Roboto:400 @media property: value; Media features } and (...) { all screen print

CSS Rules @

FONT LOADING

LINE HEIGHT CALCULATIONS (LEGACY)

line-height: number normal

vertical-align: baseline sub super % size top text-top middle bottom text-bottom % size FONT FORMATS

EXAMPLE url(ﬁle.ttf) format("truetype"); truetype opentype

embedded-opentype svgwoff woff2

MEDIA QUERIES (RESPONSIVE DESIGN)

CSS IMPORT RULES

@import "index.css"; @import url("index.css"); @import url("print.css") print;

CSS CONDITIONAL

EXAMPLE @supports not ( display: ﬂexbox ) { .nav { display:block } }

@supports property: value; }

( ) ... {

not feature or and

FONTS, TEXT, SPEECH & RULES

STATUS

EXAMPLE open circle;

ﬁlled open status

size % ,

size

start end match-parent

serif font

sans serif font

monospaced font

fantasy font

(3)

overﬂow-x overﬂow:

visible

visibility: hidden collapse visible

overﬂow-x: hidden scroll auto no-display no-content visible

overﬂow-y: hidden scroll auto no-display no-content overﬂow-y

border-box padding-box content-box border-box padding-box content-box auto width height contain cover background-clip:

background-origin: background-size:

LEVEL 3

background: color pos sizerepeatoriginclip attach image background-color: background-image: background-repeat: LEVEL 2 Backgrounds B color transparent url( image.png none repeat background-attachment: scroll background-position: pos-x pos-y

background: color image repeat attachment position repeat-x repeat-y

ﬁxed local

,url( image.jpg )

) , ...

box-shadow: nonepos-xpos-yblur size EFFECTS: SHADOWS

color inset

repeat-style-v repeat repeat repeat-style-h

repeat-style

URI

top

bottom left center right

SIZING

contain ﬁll

object-ﬁt: cover none scale-down 50% 50%

object-position: background-position IMAGES AND OBJECTS

LINEAR GRADIENTS GRADIENTS from-image 1dppx IMAGE PROCESSING CSS Images I background-image:

linear-gradient( direction color1start,color2start,...) RADIAL GRADIENTS

background-image:

radial-gradient( shape rsize at pos color1 ...) repeating-linear-*

repeating-radial-*

image-resolution:

image-orientation: 0deg size

resolution snap crisp-edges

auto

image-rendering: pixelated

start color2,

CSS3

CHEAT SHEET

WEB DESIGN

BORDER IMAGE CSS Border Image B border-image-source: none border-image: source

URIurl( img.png

border-image-slice: 100% ﬁll

border-image-width: 1 top right bottom left border-image-outset: 0

border-image-repeat: stretch repeat round space slice /width outset repeat

REPEAT-STYLE PARAMETERS repeat

EXAMPLE repeat no-repeat (or repeat-x) space round no-repeat DIMENSIONS auto width: none max-width: 0 min-width: margin-top: 0

margin: 4Ptop right bottom left top left right

3P bottom

2P top bottom left right 1P top right bottom left CSS Box Model B % size margin-right: 0 size% margin-bottom: 0 size% margin-left: 0 size% % size % size % size auto height: none max-height: 0 min-height: % size % size % size MARGIN SHORTHAND MARGINS/PADDINGS SPECIFIC MARGINS padding-top: 0

padding: 4Ptop right bottom left top left right

3P bottom

2P top bottom left right 1P top right bottom left

% size padding-right: 0 size% padding-bottom: 0 size% padding-left: 0 size% PADDING SHORTHAND SPECIFIC PADDINGS

top right bottom left )

IMAGE OUTSET size number

top right bottom left SPECIFIC CORNERS Rounded Corners B border-top-left-radius: border-top-right-radius: border-bottom-left-radius: border-bottom-right-radius:

border-radius: 4P top-left top-right bottom-right bottom-left

3P

2P top-left bottom-right

1P top-left top-right bottom-right bottom-left MAIN SHORTHAND WITH HORIZONTAL/VERTICAL RADIUS

border-radius: MAIN SHORTHAND

top-left top-right bottom-left bottom-right top-right bottom-left 0

border-radius / border-radius SIDE BORDER SHORTHAND

border: width style color BORDERS

CSS Borders B

medium border-width: size thin thick

hidden border-style: none border-style

currentColor border-color: color border-top: border-top-* border-right-* border-bottom-* border-left-* SPECIFIC SHORTHANDS border-right: border-bottom: border-left: color style width color style width color style width color style width MAIN SHORTHAND

BORDER IMAGE WIDTH auto size number %

number % IMAGE SLICE

GRADIENT OPTIONS

EXAMPLE (ellipse 55px 45px at top, red, blue) shape circle ellipse rsize radius rh rv at pos at pos... ...

RADIUS SIZE (RSIZE) ALSO ACCEPT... farthest-corner closest-side farthest-side closest-corner DIRECTION to top 90deg 180deg 270deg 360deg 35deg 145deg 215deg 325deg to bottom to left rightto to top left to top right to bottom left to bottom right % START SIZE size OVERFLOW/VISIBILITY BORDER STYLES solid dotted dashed double groove ridge inset outset

BOX TYPES (DISPLAY) inline display: block inline-block none LST list-item TBL inline-tabletable table-row table-caption run-in inline-list-item GRD inline-gridgrid FLX inline-ﬂex ﬂex

subgrid

BLK

table-cell

BOX MODEL: BORDERS, BACKGROUNDS & IMAGES

CSS MODEL BOX size-h margin padding content 2-PARAMETER FORMAT size-h size-v size-h size-v 1-PARAMETER size-h = size-v % size 0 size% 0 size% 0 size%

(4)

list-style: type position image LISTS GENERATED CONTENT Lists L normal content: none

open-quote close-quote no-open-quote no-close-quote

STR

URIurl( img.jpg ) ATT attr( attr ) ' string ' CNTcounter( name, list-style-type)

none content-increment: name

none content-reset: name

quotes: ' open-str' ' close-str' none none

list-style-image: URIurl( img.jpg ) inside

list-style-position: outside disc

list-style-type: circle square decimal

1, 01 decimal-leading-zero upper-roman

III, iii lower-roman

upper-alpha

A, a lower-alpha

lower-greek

O

TH armenian georgian none

MARKERS

item's marker generated by list item (bullet, number...) ::marker

list-item

marker-side: list-container

PSEUDOCLASSES

EXAMPLE p::before { content: "-"; }

before element ::before after element ::after CIRCLE/ELLIPSE circle(shape-radius ) ellipse( polygon( x0 y0,... , xi yi) position at )

radius_x radius_y at position) ) RECTANGLE

inset(top right bottom left round border-radius)

POLYGON

SEPARABLE

NON-SEPARABLE

outline:color style width RESIZE/OVERFLOW

resize:

string text-overﬂow:clip ellipsis

OUTLINE medium outline-width: thick BOX MODEL content-box box-sizing: border-box

CSS3

CHEAT SHEET

WEB DESIGN

POINTING DEVICES AND KEYBOARDS User Interface

U

auto caret-color: color

cursor: URIurl( img.png ) crosshair default pointer move e-resize ne-resize nw-resize

n-resize se-resize s-resizesw-resize

w-resize text wait help progress none auto context-menu cell vertical-text

alias copy no-drop not-allowed grab grabbing ew-resize ns-resize nesw-resize nwse-resize col-resize row-resize all-scroll

zoom-in zoom-out x y

auto

nav-up: id current root target thin

size

hidden

outline-style: none auto dotted dashed solid double groove ridge inset outset

invert outline-color: color 0 outline-offset: size horizontal vertical both none FILTER PROPERTY CSS Filters F filter: filter1 FILTERS blur( none filter2 ... blur ) brightness(number %) contrast(number %) grayscale(number %) invert(number %) sepia(number %) opacity(number %) saturate(number %) hue-rotate(angle )

drop-shadow(pos-x pos-y blur color)

0px = original >0px=blur

0%=black 100%=original >100% ALLOWED

0%=grey 100%=original >100% ALLOWED

0%=B&W 100%=original >100% ALLOWED

0%=original 100%=B&W 0%=original 100%=invert 0%=original 100%=sepia 0%=transparent 100%=original 0deg=original 360deg=max (same as text-shadow) BASIC SHAPES shape-outside:

FLOAT AREA SHAPE none CSS Shapes S

URIurl( img.png ) shape-image-threshold: 0.0 number shape-margin: 0 size% BLEND MODES Compositing C normal mix-blend-mode:

COMPOSITING AND BLENDING

blend auto

isolation: isolate

normal multiply screen overlay

darken lighten color-dodge color-burn hard-light soft-light difference exclusion hue saturation color luminosity

normal background-blend-mode: blend

mask-border: source slice / width repeat mask: image none mask-image: gradient POSITIONED MASKS mask-border-source: none BORDER-BOX MASK CSS Masks M none clip-path: CLIPPING SHAPE

URIurl( img.png )

URIurl( img.svg#mask ) auto

mask-mode: alpha luminance no-repeat

mask-repeat:

center

mask-position: background-position border-box

mask-clip: no-clip geometry-box border-box

mask-origin: geometry-box auto

mask-size: background-size add

mask-composite: subtract intersect exclude

mode position / size repeat clip composite URIurl( img.svg#mask )

mask-border-mode: alpha luminance mask-border-slice: 0

mask-border-width: auto border-image-width mask-border-outset: 0 border-image-outset mask-border-repeat: stretch border-image-repeat

/ outset mode background-repeat basic-shape geometry-box basic-shape geometry-box SHAPE RADIUS closest-side farthest-side % size 0 180 90 270 deg REFERENCE BOX border-box padding-box content-box margin-box box box shape-box =

geometry-box = shape-box ﬁll-box stroke-box view-box =

nav-down: nav-left: nav-right:

auto id current root target auto id current root target

auto id current root target EFFECTS, MASKS, SHAPES, LISTS & UI

FILTER VALUES 0.0 ... 1.0 number 0% ... 100% % border-image-slice

(5)

PERSPECTIVE OPTIONS TRANSFORMS OPTIONS transform-origin: ﬂat transform-style: transform: 3D TRANSFORMS translateZ(size) transform:

translate3d( size % , size % ) transform: scaleZ( ) transform: scale3d( , ) number number number

transform: perspective(size) transform: rotateY(angle) transform: rotate3d( , angle) transform: matrix3d(n1, n2 , n3 , n4 , n5 , n6 ) transform:

CSS3

CHEAT SHEET

WEB DESIGN

ease linear ease-in ease-out ease-in-out cubic-bezier() (0.25, 0.1, 0.25, 1) (0.00, 0.0, 1.00, 1) (0.42, 0.0, 1.00, 1) (0.00, 0.0, 0.58, 1) (0.42, 0.0, 0.58, 1) timing-function time TRANSITIONS CSS Transitions T transition-duration:

transition-property: all property1

timing-function ease transition-timing-function: ,property2,... 0s time transition-delay: 0s

transition: property duration t-function delay none step-start step-end steps(n) steps(a,b) steps() (1, start) timing-function (1, end) (n, end) (a, b) time ANIMATIONS CSS Animations A animation-duration: animation-name: name1 timing-function ease animation-timing-function: ,name2 ,... 0s time animation-delay: 0s

animation: name duration t-function delay none number animation-iteration-count: 1 inﬁnite normal animation-direction: reverse alternate alternate-reverse none

animation-ﬁll-mode: forwards backwards both running animation-play-state: paused it-c dir f-m p-s TRANSFORM PROPERTY CSS Transforms T transform: transform1 2D TRANSFORMS none transform2 ... translateX( size %) transform: translateY( size %) transform:

translate(size % , size %)

transform: scaleX(number) transform: scaleY( ) transform: scale( , ) number number number

transform: rotate(angle) transform: skewX(angle) transform: skewY( ) transform: skew( , ) angle angle angle transform: matrix(n1, n2 , n3 , n4 , n5 , n6) , size , number rotateX(angle) transform: rotateZ(angle) transform: ,

number number , number ,...,n16 50% 50% pos-x pos-y pos-z

preserve-3d

none perspective: size

perspective-origin: 50% 50% pos-x pos-y pos-z visible

backface-visibility: hidden Z

X Y

motion: path offset motion-path: MOTION PATH none basic-shape CSS Motion Paths M

URI url( img.svg ) motion-offset:

motion-rotation: auto angle 0 size%

reverse rotation

geometry-box path

ALIGNMENT AND LIMITS CAPTURING SCROLL SNAP AREAS

CSS Scroll Snap S none scroll-snap-type: x block both y

inline mandatory proximity inline-axis scroll-snap-align: scroll-snap-stop: SCROLL SNAPPING/SNAPPORT scroll-padding*: scroll-snap-margin*: normal always block-axis

columns: widthcounter COLUMNS

CSS Multi Columns C

column-width: auto size column-count: auto number

COLUMN RULES

column-gap: size normal column-rule-color: color column-rule-style: style none

column-rule-width: size thin medium thick

column-rule: widthstyle color COLUMN BREAKS

break-before/break-after: auto always avoid left right page column avoid-page avoid-column break-inside: auto avoid avoid-page avoid-column

SPANNING, FILLING AND GAPS column-span: none all column-ﬁll: auto balance *-block: start end

INLINE/BLOCK *-inline: 0 *-inline-start: size% 0 *-inline-end: size% 0 *-block-start: size% 0 *-block-end: size% start end SNAP MARGIN/PADDING *: 0 *-top: size% 0 *-right: size% 0 *-bottom: size% 0 *-left: size%

top right bottom left SCROLL SNAPPING/SNAPPORT ANIMATION KEYFRAMES @-vendor-keyframes animname { property: value; ... } @keyframes { 0% ... { property: value; ... } 100% } 0% = from 100% = to

TRANSITIONS, ANIMATIONS, TRANSFORMS, MOTIONS, SNAP & COLUMNS

SLOW NORMAL FAST

s n s n n s s n n n n n s f s

CHAINED (ANIMATION PROPERTY) animname1 5s linear, animname2 5s linear 5s , animname3 6s linear 10s;

AXIS

EXAMPLE scroll-snap-align: start end none start center end

(6)

align-items: normal stretch SECONDARY AXIS ▼ self-position PRIMARY AXIS ITEM PROPERTIES justify-self: auto

justify-items: normal stretch PRIMARY AXIS

▼

overﬂow-pos self-position legacy left center right

auto normal stretch

▼ self-position

SECONDARY AXIS

align-self: auto normal stretch

▼ self-position baseline-position baseline-position baseline-position baseline-position center start end self-start self-end ﬂex-start ﬂex-end left right ▼ ▼ ▼ ▼ SELF-POSITION FLEXIBILITY

SHORTHAND TEMPLATE GRID

template-rows grid-template: / template-columns none template-areas + template-rows/columns ▼ ▼ PLACEMENT SHORTHANDS LINE-BASED PLACEMENT template grid: column-start grid-column: LINES

▼ refer to a numbered or named grid line

▼

ITEM GRIDS

grid-column-start/grid-column-end: auto line grid-row-start/grid-row-end: auto line

column-end row-start

grid-row: row-end

template-rows / auto-ﬂow dense grid-auto-columns template-columns /

grid-auto-rows auto-ﬂow dense

▼

name number

span numbername span across until grid line template-area

grid-area: ▼

▼ row-start / column-start / row-end / column-end AREAS

▼ area grid area name (grid-area) ▼ . empty grid area cell

SHORTHAND GRID row-gap grid-gap: GUTTERS (GAPS) 0 grid-column-gap: CONTAINER GRIDS " ITEM PROPERTIES

ﬂex: grow shrink

ﬂex-ﬂow: direction wrap

CSS3

CHEAT SHEET

WEB DESIGN

POSITIONING Positioning P static

position: relative absoluteﬁxed sticky

none left

ﬂoat: right

none left

clear: right both FLOATING 15 5 -5 CONTAINER PROPERTIES CSS Flexbox F row

ﬂex-direction: row-reverse column column-reverse nowrap

ﬂex-wrap: wrap wrap-reverse

0

ﬂex-grow: number

0

ﬂex-shrink: number

auto

ﬂex-basis: content size%

basis ﬂex-start

justify-content: center ﬂex-end space-between space-around ﬂex-start

align-items: centerﬂex-end baseline stretch ﬂex-start

align-content: center ﬂex-end stretch MULTI-LINE CONTAINER PROPERTIES

ﬂex-start

align-self: auto center ﬂex-end baseline stretch number order: 0 PRIMARY AXIS SPC SECONDARY AXIS space-between space-around SPC AREA GRID EXPLICIT GRID CSS Grids G none grid-template-columns: track1 grid-template-rows: TRACKS ▼ none %

size fr automatic size or speciﬁc size/fraction unit track2 ...

track1 track2 ...

▼ [

▼

named grid lines + speciﬁc size linename ] minmax( ▼ min, max) repeat( ▼ number, tracks) max-content ▼ ﬁt-content( min-content % size )

min <= size range <= max repeat fragments n times

largest max/min content track ~ min(max-content, max(auto, arg)) auto

▼ repeat(auto-fit, tracks) repeated fragments and fit space ▼ repeat(auto-fill, tracks) repeated fragments and fill space

none

grid-template-areas: area1 area2"..." areaY areaZ" % size fr auto % size 0 grid-row-gap: size% column-gap IMPLICIT GRID auto grid-auto-columns: size% auto grid-auto-rows: size% row

grid-auto-ﬂow: column dense ▼ no grid areas are deﬁned

▼

ORDERING AND ORIENTATION

ALIGNMENT AND ORDERING

CONTAINER PROPERTIES CSS Align A normal justify-content/align-content: baseline-position CONTENT DISTRIBUTION

space-between space-around space-evenly stretch

▼ ▼ ▼ self-position baseline last-baseline ▼ BASELINE-POSITION top bottom caption-side: TABLES size-h border-spacing: auto table-layout: ﬁxed separate border-collapse: collapse show empty-cells: hide

FLEXBOX, POSITIONING, ALIGNMENT & GRID

POSITIONING (NOT STATIC POSITION) auto number % size top: left: right: bottom: z-index: auto size% auto size% auto size% auto size-v OVERFLOW POSITION safe unsafe overflow-pos overflow-pos overflow-pos overflow-pos (self, content) (self)

idem (only ﬂex) (self, content) fallback: start

EXAMPLE

#grid { display:grid; grid-template-areas: " head head"

"nav main" "foot foot"; }