<flex>

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since 2017 ..

Learn more
See full compatibility

CSS <flex> . , grid-template-columns, grid-template-rows.

Specification
CSS Grid Layout Module Level 2 # fr-unit

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 14 . 2025 . by MDN contributors.

View this page on GitHub Report a problem with this content

CSS
Modules
1. Anchor positioning
2. CSS Animations
3. Backgrounds and borders
4. CSS Basic User Interface
5. Borders and box decorations
6. CSS
7. Box model
8. Box sizing
9. Cascading and inheritance
10. Color adjustment
11. CSS Colors
12. Compositing and blending
13. Conditional rules
14. Containment
15. Counter styles
16. CSSOM view
17. Custom functions and mixins
18. Custom highlight API
19. CSS
20. Display
21. Easing functions
22. Environment variables
23. Filter effects
24. CSS Flexible Box Layout
25. Font loading
26. CSS Fonts
27. Fragmentation
28. Gaps
29. Generated content
30. CSS Grid Layout
31. CSS Images
32. Inline layout
33. Lists and counters
34. Logical properties and values
35. Masking
36. Media queries
37. Motion path
38. Multi-column layout
39. Namespaces
40. Nesting
41. Overflow
42. Overscroll behavior
44. Positioned layout
45. Properties and values API
46. Pseudo-elements
47. Round display
48. CSS Ruby Layout
49. Scoping
50. Scroll anchoring
51. Scroll snap
52. Scroll-driven animations
53. Scrollbars styling
54. CSS-
55. Shadow parts
56. Shapes
57. Syntax
58. CSS Table
59. CSS Text
60. CSS Text Decoration
61. CSS Transforms
62. Transitions
63. Values and units
64. View transitions
65. Viewport
66. WebXR DOM overlays
67. Will change
68. CSS
Anchor positioning
1. Using anchor positioning
2. Handling overflow
3. Anchored container queries
1. Animatable properties
2. CSS-
2. Resizing background images
3. Scaling SVG backgrounds
Borders and box decorations
1. border-shape nav menu
Box alignment
1. Overview
2. In block layout
3. Flexbox
4. In grid layout
5. In multi-column layout
1. ( , box model)
Box sizing
1. Aspect ratios
Cascade
1. Introduction
Cascading variables
1. CSS
Colors
1. HTML- CSS
2. Color values
3. Using relative colors
4. Using color wisely
5. Accessibility: Colors and luminance
6. Accessibility: Color contrast
1. Basic concepts
2. Styling columns
3. CSS
4. Spanning and balancing columns
5. Handling overflow
6. Handling content breaks
1. Using feature queries
2. Using container scroll-state queries
Containment
1. Container queries
2. Using containment
3. Using container size and style queries
1. CSS
CSSOM View
1. Coordinate systems (API)
2. Viewport concepts
Custom functions and mixins
1. Using CSS custom functions
1. Block and inline layout
2. CSS
3. Flow layout and overflow
4. Flow layout and writing modes
5. In flow and out of flow
9. Inline formatting context
10. Using multi-keyword syntax
Environment variables
1. Using environment variables
Filter effects
1. Using filter effects
1. Flexbox
2. Flexbox and other layouts
3. Flex
4. Ordering flex items
5. Controlling flex item ratios
6. Flex
7. Typical use cases
1. OpenType features
2. Variable fonts
3. The Web Open Font Format (WOFF)
1. Grid Layout
2. Grid-
3. - CSS Grid
4. -
5. Layout using named grid lines
6. Using auto-placement
7. CSS Grid
8. CSS grids, logical values and writing modes
9. Grid layout and accessibility
10. Realizing common layouts using CSS Grid Layout
11. Subgrid
12. Grid lanes layout
1. CSS-
2. Using object-view-box
4. Implementing image sprites
1. Indenting lists
1. Basic concepts
2. For floating and positioning
3. For margins, borders, and padding
4. For sizing
Masking
1. Introduction
2. Clipping
3. Multiple masks
4. Mask properties
-
2. For accessibility
4. Printing
Nesting
1. Nesting at-rules
2. Nesting and specificity
3. Using nesting
Overflow
1. Creating carousels
1. (stacking context)
2. Stacking floating elements
3. CSS z-index
4. Using z-index
5. Stacking without z-index
Properties and Values API
1. CSS Houdini
2. Registering custom properties in CSS
Scroll anchoring
1. Overview
Scroll-driven animations
1. Scroll-driven animation timelines
2. Understanding timeline insets
3. Understanding timeline range names
Scroll snap
1. CSS Scroll Snap
2. Using scroll snap events
Selectors
1. Selectors and combinators
2. Selector structure
3. Privacy and :visited
4. :target
1. Overview
2. Box-value shapes
3. Image-based shapes
4. Using shape-outside
5. Shape generator
Syntax
3. At-rules
4. Error handling
1. Wrapping and breaking text
2. Handling whitespace
Text decoration
1. Text shadows
1. Using transforms
1. CSS
Values and units
1. Value definition syntax
2. Numeric data types
3. Textual data types
4. Using math functions
5. Using typed arithmetic
Writing modes
1. Introduction
2. Vertical form controls
How to
Layout cookbook
1. Media objects
2. Column layouts
3. Center an element
4. Sticky footers
6. Breadcrumb Navigation
7. List group with badges
8. Pagination
9. Card
10. Grid wrapper
11. Contribute a recipe
  1. Cookbook template
1. (border-image)
2. (border-radius)
3. (box-shadow)
5. Color mixer
6. Shape generator
CSS
Properties
1. -moz-*
  1. -moz-float-edge
  2. -moz-force-broken-image-icon
  3. -moz-orient
  4. -moz-user-focus
  5. -moz-user-input
2. -webkit-*
  1. -webkit-border-before
  2. -webkit-box-reflect
  3. -webkit-mask-box-image
  4. -webkit-mask-composite
  5. -webkit-mask-position-x
  6. -webkit-mask-position-y
  7. -webkit-mask-repeat-x
  8. -webkit-mask-repeat-y
  9. -webkit-tap-highlight-color
  10. -webkit-text-fill-color
  11. -webkit-text-security
  12. -webkit-text-stroke
  13. -webkit-text-stroke-color
  14. -webkit-text-stroke-width
  15. -webkit-touch-callout
3. (--*): CSS
4. accent-color
5. align-*
  1. align-content
  2. align-items
  3. align-self
6. alignment-baseline
7. all
8. anchor-name
9. anchor-scope
10. animation-*
  1. animation-composition
  2. animation-delay
  3. animation-direction
  4. animation-duration
  5. animation-fill-mode
  6. animation-iteration-count
  7. animation-name
  8. animation-play-state
  9. animation-range
  10. animation-range-end
  11. animation-range-start
  12. animation-timeline
  13. animation-timing-function
11. animation
12. appearance (-moz-appearance, -webkit-appearance)
13. aspect-ratio
14. backdrop-filter
15. backface-visibility
16. background-*
  1. background-attachment
  2. background-blend-mode
  3. background-clip
  4. background-color
  5. background-image
  6. background-origin
  7. background-position
  8. background-position-x
  9. background-position-y
  10. background-repeat
  11. background-repeat-x
  12. background-repeat-y
  13. background-size
17. background
18. baseline-shift
19. baseline-source
20. block-size
21. border-*
  1. border-block
  2. border-block-color
  3. border-block-end
  4. border-block-end-color
  5. border-block-end-style
  6. border-block-end-width
  7. border-block-start
  8. border-block-start-color
  9. border-block-start-style
  10. border-block-start-width
  11. border-block-style
  12. border-block-width
  13. border-bottom
  14. border-bottom-color
  15. border-bottom-left-radius
  16. border-bottom-right-radius
  17. border-bottom-style
  18. border-bottom-width
  19. border-collapse
  20. border-color
  21. border-end-end-radius
  22. border-end-start-radius
  23. border-image
  24. border-image-outset
  25. border-image-repeat
  26. border-image-slice
  27. border-image-source
  28. border-image-width
  29. border-inline
  30. border-inline-color
  31. border-inline-end
  32. border-inline-end-color
  33. border-inline-end-style
  34. border-inline-end-width
  35. border-inline-start
  36. border-inline-start-color
  37. border-inline-start-style
  38. border-inline-start-width
  39. border-inline-style
  40. border-inline-width
  41. border-left
  42. border-left-color
  43. border-left-style
  44. border-left-width
  45. border-radius
  46. border-right
  47. border-right-color
  48. border-right-style
  49. border-right-width
  50. border-shape
  51. border-spacing
  52. border-start-end-radius
  53. border-start-start-radius
  54. border-style
  55. border-top
  56. border-top-color
  57. border-top-left-radius
  58. border-top-right-radius
  59. border-top-style
  60. border-top-width
  61. border-width
22. border
23. bottom
24. box-*
  1. box-align
  2. box-decoration-break
  3. box-direction
  4. box-flex
  5. box-flex-group
  6. box-lines
  7. box-ordinal-group
  8. box-orient
  9. box-pack
  10. box-shadow
  11. box-sizing
25. break-*
  1. break-after
  2. break-before
  3. break-inside
26. caption-side
27. caret-*
  1. caret-animation
  2. caret-color
  3. caret-shape
28. caret
29. clear
30. clip-path
31. clip-rule
32. clip
33. color-*
  1. color-interpolation
  2. color-interpolation-filters
  3. color-scheme
34. color
35. column-*
  1. column-count
  2. column-fill
  3. column-gap
  4. column-height
  5. column-rule
  6. column-rule-break
  7. column-rule-color
  8. column-rule-style
  9. column-rule-visibility-items
  10. column-rule-width
  11. column-span
  12. column-width
  13. column-wrap
36. columns
37. contain-*
  1. contain-intrinsic-block-size
  2. contain-intrinsic-height
  3. contain-intrinsic-inline-size
  4. contain-intrinsic-size
  5. contain-intrinsic-width
38. contain
39. container-name
40. container-type
41. container
42. content-visibility
43. content
44. corner-*
  1. corner-block-end-shape
  2. corner-block-start-shape
  3. corner-bottom-left-shape
  4. corner-bottom-right-shape
  5. corner-bottom-shape
  6. corner-end-end-shape
  7. corner-end-start-shape
  8. corner-inline-end-shape
  9. corner-inline-start-shape
  10. corner-left-shape
  11. corner-right-shape
  12. corner-shape
  13. corner-start-end-shape
  14. corner-start-start-shape
  15. corner-top-left-shape
  16. corner-top-right-shape
  17. corner-top-shape
45. counter-*
  1. counter-increment
  2. counter-reset
  3. counter-set
47. cx
48. cy
49. d
50. direction
51. display
52. dominant-baseline
53. dynamic-range-limit
54. empty-cells
55. field-sizing
56. fill-opacity
57. fill-rule
58. fill
59. filter
60. flex-*
  1. flex-basis
  2. flex-direction
  3. flex-flow
  4. flex-grow
  5. flex-line-count
  6. flex-shrink
  7. flex-wrap
61. flex
62. float
63. flood-color
64. flood-opacity
65. font-*
  1. font-family
  2. font-feature-settings
  3. font-kerning
  4. font-language-override
  5. font-optical-sizing
  6. font-palette
  7. font-size
  8. font-size-adjust
  9. font-smooth
  10. font-stretch
  11. font-style
  12. font-synthesis
  13. font-synthesis-position
  14. font-synthesis-small-caps
  15. font-synthesis-style
  16. font-synthesis-weight
  17. font-variant
  18. font-variant-alternates
  19. font-variant-caps
  20. font-variant-east-asian
  21. font-variant-emoji
  22. font-variant-ligatures
  23. font-variant-numeric
  24. font-variant-position
  25. font-variation-settings
  26. font-weight
  27. font-width
66. font
67. forced-color-adjust
68. frame-sizing
69. gap (grid-gap)
70. grid-*
  1. grid-area
  2. grid-auto-columns
  3. grid-auto-flow
  4. grid-auto-rows
  5. grid-column
  6. grid-column-end
  7. grid-column-start
  8. grid-row
  9. grid-row-end
  10. grid-row-start
  11. grid-template
  12. grid-template-areas
  13. grid-template-columns
  14. grid-template-rows
71. grid
72. hanging-punctuation
73. height
74. hyphenate-character
75. hyphenate-limit-chars
76. hyphens
77. image-*
  1. image-orientation
  2. image-rendering
  3. image-resolution
78. initial-letter
79. inline-size
80. inset-*
  1. inset-block
  2. inset-block-end
  3. inset-block-start
  4. inset-inline
  5. inset-inline-end
  6. inset-inline-start
81. inset
82. interactivity
83. interest-*
  1. interest-delay
  2. interest-delay-end
  3. interest-delay-start
84. interpolate-size
85. isolation
86. justify-*
  1. justify-content
  2. justify-items
  3. justify-self
87. left
88. letter-spacing
89. lighting-color
90. line-*
  1. line-break
  2. line-clamp
  3. line-height
  4. line-height-step
91. link-parameters
92. list-*
  1. list-style
  2. list-style-image
  3. list-style-position
  4. list-style-type
93. margin-*
  1. margin-block
  2. margin-block-end
  3. margin-block-start
  4. margin-bottom
  5. margin-inline
  6. margin-inline-end
  7. margin-inline-start
  8. margin-left
  9. margin-right
  10. margin-top
  11. margin-trim
94. margin
95. marker-*
  1. marker-end
  2. marker-mid
  3. marker-start
96. marker
97. mask-*
  1. mask-border
  2. mask-border-mode
  3. mask-border-outset
  4. mask-border-repeat
  5. mask-border-slice
  6. mask-border-source
  7. mask-border-width
  8. mask-clip
  9. mask-composite
  10. mask-image
  11. mask-mode
  12. mask-origin
  13. mask-position
  14. mask-repeat
  15. mask-size
  16. mask-type
98. mask
99. math-*
  1. math-depth
  2. math-shift
  3. math-style
100. max-*
  1. max-block-size
  2. max-height
  3. max-inline-size
  4. max-width
101. min-*
  1. min-block-size
  2. min-height
  3. min-inline-size
  4. min-width
102. mix-blend-mode
103. object-*
  1. object-fit
  2. object-position
  3. object-view-box
104. offset-*
  1. offset-anchor
  2. offset-distance
  3. offset-path
  4. offset-position
  5. offset-rotate
105. offset
106. opacity
107. order
108. orphans
109. outline-*
  1. outline-color
  2. outline-offset
  3. outline-style
  4. outline-width
110. outline
111. overflow-*
  1. overflow-anchor
  2. overflow-block
  3. overflow-clip-margin
  4. overflow-inline
  5. overflow-wrap
  6. overflow-x
  7. overflow-y
112. overflow
113. overlay
114. overscroll-*
  1. overscroll-behavior
  2. overscroll-behavior-block
  3. overscroll-behavior-inline
  4. overscroll-behavior-x
  5. overscroll-behavior-y
115. padding-*
  1. padding-block
  2. padding-block-end
  3. padding-block-start
  4. padding-bottom
  5. padding-inline
  6. padding-inline-end
  7. padding-inline-start
  8. padding-left
  9. padding-right
  10. padding-top
116. padding
117. page-*
  1. page-break-after
  2. page-break-before
  3. page-break-inside
118. page
119. paint-order
120. path-length
121. perspective-origin
122. perspective
123. place-*
  1. place-content
  2. place-items
  3. place-self
124. pointer-events
125. position-*
  1. position-anchor
  2. position-area
  3. position-try
  4. position-try-fallbacks
  5. position-try-order
  6. position-visibility
126. position
127. print-color-adjust
128. quotes
129. r
130. reading-flow
131. reading-order
132. resize
133. right
134. rotate
135. row-*
  1. row-gap
  2. row-rule
  3. row-rule-break
  4. row-rule-color
  5. row-rule-style
  6. row-rule-visibility-items
  7. row-rule-width
136. ruby-*
  1. ruby-align
  2. ruby-overhang
  3. ruby-position
137. rule-*
  1. rule-break
  2. rule-color
  3. rule-style
  4. rule-visibility-items
  5. rule-width
138. rule
139. rx
140. ry
141. scale
142. scroll-*
  1. scroll-behavior
  2. scroll-initial-target
  3. scroll-margin
  4. scroll-margin-block
  5. scroll-margin-block-end
  6. scroll-margin-block-start
  7. scroll-margin-bottom
  8. scroll-margin-inline
  9. scroll-margin-inline-end
  10. scroll-margin-inline-start
  11. scroll-margin-left
  12. scroll-margin-right
  13. scroll-margin-top
  14. scroll-marker-group
  15. scroll-padding
  16. scroll-padding-block
  17. scroll-padding-block-end
  18. scroll-padding-block-start
  19. scroll-padding-bottom
  20. scroll-padding-inline
  21. scroll-padding-inline-end
  22. scroll-padding-inline-start
  23. scroll-padding-left
  24. scroll-padding-right
  25. scroll-padding-top
  26. scroll-snap-align
  27. scroll-snap-stop
  28. scroll-snap-type
  29. scroll-target-group
  30. scroll-timeline
  31. scroll-timeline-axis
  32. scroll-timeline-name
143. scrollbar-*
  1. scrollbar-color
  2. scrollbar-gutter
  3. scrollbar-width
144. shape-*
  1. shape-image-threshold
  2. shape-margin
  3. shape-outside
  4. shape-rendering
145. speak-as
146. stop-color
147. stop-opacity
148. stroke-*
  1. stroke-dasharray
  2. stroke-dashoffset
  3. stroke-linecap
  4. stroke-linejoin
  5. stroke-miterlimit
  6. stroke-opacity
  7. stroke-width
149. stroke
150. tab-size
151. table-layout
152. text-*
  1. text-align
  2. text-align-last
  3. text-anchor
  4. text-autospace
  5. text-box
  6. text-box-edge
  7. text-box-trim
  8. text-combine-upright
  9. text-decoration
  10. text-decoration-color
  11. text-decoration-inset
  12. text-decoration-line
  13. text-decoration-skip
  14. text-decoration-skip-ink
  15. text-decoration-style
  16. text-decoration-thickness
  17. text-emphasis
  18. text-emphasis-color
  19. text-emphasis-position
  20. text-emphasis-style
  21. text-indent
  22. text-justify
  23. text-orientation
  24. text-overflow
  25. text-rendering
  26. text-shadow
  27. text-size-adjust
  28. text-spacing-trim
  29. text-transform
  30. text-underline-offset
  31. text-underline-position
  32. text-wrap
  33. text-wrap-mode
  34. text-wrap-style
153. timeline-scope
154. top
155. touch-action
156. transform-*
  1. transform-box
  2. transform-origin
  3. transform-style
157. transform
158. transition-*
  1. transition-behavior
  2. transition-delay
  3. transition-duration
  4. transition-property
  5. transition-timing-function
159. transition
160. translate
161. unicode-bidi
162. user-modify
163. user-select
164. vector-effect
165. vertical-align
166. view-*
  1. view-timeline
  2. view-timeline-axis
  3. view-timeline-inset
  4. view-timeline-name
  5. view-transition-class
  6. view-transition-name
  7. view-transition-scope
167. visibility
168. white-space
169. white-space-collapse
170. widows
171. width
172. will-change
173. word-break
174. word-spacing
175. writing-mode
176. x
177. y
178. z-index
179. zoom
Selectors
1. & nesting selector
4. ID
5. Keyframe selectors
6. Namespace separator
Combinators
Pseudo-classes
1. :-moz-*
  1. :-moz-broken
  2. :-moz-drag-over
  3. :-moz-first-node
  4. :-moz-handler-blocked
  5. :-moz-handler-crashed
  6. :-moz-handler-disabled
  7. :-moz-last-node
  8. :-moz-loading
  9. :-moz-locale-dir(ltr)
  10. :-moz-locale-dir(rtl)
  11. :blank
  12. :-moz-submit-invalid
  13. :-moz-suppressed
  14. :-moz-user-disabled
  15. :-moz-window-inactive
2. :active-view-transition
3. :active-view-transition-type()
4. :active
5. :any-link
6. :autofill
7. :blank
8. :buffering
9. :checked
10. :current
11. :default
12. :defined
13. :dir()
14. :disabled
15. :empty
16. :enabled
17. :first-child
18. :first-of-type
19. :first
20. :focus-visible
21. :focus-within
22. :focus
23. :fullscreen
24. :future
25. :has-slotted
26. :has()
27. :heading
28. :heading()
29. :host-context()
30. :host
31. :host
32. :hover
33. :in-range
34. :indeterminate
35. :interest-source
36. :interest-target
37. :invalid
38. :is()
39. :lang()
40. :last-child
41. :last-of-type
42. :left
43. :link
44. :local-link
45. :modal
46. :muted
47. :not()
48. :nth-*
  1. :nth-child
  2. :nth-last-child
  3. :nth-last-of-type()
  4. :nth-of-type()
49. :only-child
50. :only-of-type
51. :open
52. :optional
53. :out-of-range
54. :past
55. :paused
56. :picture-in-picture
57. :placeholder-shown
58. :playing
59. :popover-open
60. :read-only
61. :read-write
62. :required
63. :right
64. :root
65. :scope
66. :seeking
67. :stalled
68. :state()
69. :target-*
  1. :target-after
  2. :target-before
  3. :target-current
70. :target
71. :user-invalid
72. :user-valid
73. :valid
74. :visited
75. :volume-locked
76. :where()
77. :xr-overlay
Pseudo-elements
1. ::-moz-*
  1. ::-moz-color-swatch
  2. ::-moz-focus-inner
  3. ::-moz-list-bullet
  4. ::-moz-list-number
  5. ::-moz-meter-bar
  6. ::-moz-progress-bar
  7. ::-moz-range-progress
  8. ::-moz-range-thumb
  9. ::-moz-range-track
2. ::-webkit-*
  1. ::-webkit-inner-spin-button
  2. ::-webkit-meter-bar
  3. ::-webkit-meter-even-less-good-value
  4. ::-webkit-meter-inner-element
  5. ::-webkit-meter-optimum-value
  6. ::-webkit-meter-suboptimum-value
  7. ::-webkit-progress-bar
  8. ::-webkit-progress-inner-element
  9. ::-webkit-progress-value
  10. ::-webkit-scrollbar
  11. ::-webkit-search-cancel-button
  12. ::-webkit-search-results-button
  13. ::-webkit-slider-runnable-track
  14. ::-webkit-slider-thumb
3. ::after
4. ::backdrop
5. ::before
6. ::checkmark
7. ::column
8. ::cue
9. ::details-content
10. ::file-selector-button
11. ::first-letter
12. ::first-line
13. ::grammar-error
14. ::highlight()
15. ::marker
16. ::part()
17. ::picker-icon
18. ::picker()
19. ::placeholder
20. ::scroll-*
  1. ::scroll-button()
  2. ::scroll-marker
  3. ::scroll-marker-group
21. ::search-text
22. ::selection
23. ::slotted()
24. ::spelling-error
25. ::target-text
26. ::view-*
  1. ::view-transition
  2. ::view-transition-group()
  3. ::view-transition-image-pair()
  4. ::view-transition-new()
  5. ::view-transition-old()
At-rules
1. @charset
2. @color-profile
3. @container
4. @counter-style
  1. additive-symbols
  2. fallback
  3. negative
  4. pad
  5. prefix
  6. range
  7. speak-as
  8. suffix
  9. symbols
  10. system
5. @custom-media
6. @document
7. @font-face
  1. ascent-override
  2. descent-override
  3. font-display
  4. font-family
  5. font-feature-settings
  6. font-stretch
  7. font-style
  8. font-variation-settings
  9. font-weight
  10. font-width
  11. line-gap-override
  12. size-adjust
  13. src
  14. unicode-range
8. @font-feature-values
  1. font-display
9. @font-palette-values
  1. base-palette
  2. font-family
  3. override-colors
10. @function
11. @import
12. @keyframes
13. @layer
14. @media
  1. -moz-device-pixel-ratio
  2. -webkit-animation
  3. -webkit-device-pixel-ratio
  4. -webkit-transform-2d
  5. -webkit-transform-3d
  6. -webkit-transition
  7. any-hover
  8. any-pointer
  9. aspect-ratio
  10. color
  11. color-gamut
  12. color-index
  13. device-aspect-ratio
  14. device-height
  15. device-posture
  16. device-width
  17. display-mode
  18. dynamic-range
  19. forced-colors
  20. grid
  21. height
  22. horizontal-viewport-segments
  23. hover
  24. inverted-colors
  25. monochrome
  27. overflow-block
  28. overflow-inline
  29. pointer
  30. prefers-color-scheme
  31. prefers-contrast
  32. prefers-reduced-data
  33. prefers-reduced-motion
  34. prefers-reduced-transparency
  35. resolution
  36. scan
  37. scripting
  38. shape
  39. update
  40. vertical-viewport-segments
  41. video-dynamic-range
  42. width
15. @namespace
16. @page
  1. page-orientation
  2. size
17. @position-try
18. @property
  1. inherits
  2. initial-value
  3. syntax
19. @scope
20. @starting-style
21. @supports
22. @view-transition
Values
1. !important
2. fit-content
3. inherit
4. initial
5. max-content
6. min-content
7. revert
8. revert-layer
9. revert-rule
10. unset
Types
1. <absolute-size>
2. <alpha-value>
3. <angle-percentage>
4. <angle>
5. <axis>
6. <baseline-position>
7. <basic-shape>
8. <blend-mode>
9. <box-edge>
10. <calc-keyword>
11. <calc-sum>
12. <color-interpolation-method>
13. <color>
14. <content-distribution>
15. <content-position>
16. <corner-shape-value>
17. <custom-ident>
18. <dashed-function>
19. <dashed-ident>
20. <dimension>
21. <display-box>
22. <display-inside>
23. <display-internal>
24. <display-legacy>
25. <display-listitem>
26. <display-outside>
27. <easing-function>
28. <filter-function>
29. <flex>
30. <frequency-percentage>
31. <frequency>
32. <generic-family>
33. <gradient>
34. <hex-color>
35. <hue-interpolation-method>
36. <hue>
37. <ident>
38. <image>
39. <integer>
40. <length-percentage>
41. <length>
42. <line-style>
43. <line-width>
44. <named-color>
45. <number>
46. <overflow-position>
47. <overflow>
48. <percentage>
49. <position-area>
50. <position>
51. <ratio>
52. <relative-size>
53. <resolution>
54. <rule-list>
55. <self-position>
56. <shape>
57. <string>
58. <system-color>
59. <text-edge>
60. <time-percentage>
61. <time>
62. <timeline-range-name>
63. <transform-function>
64. <url>
Functions
1. -moz-image-rect()
2. abs()
3. acos()
4. alpha()
5. anchor-size()
6. anchor()
7. asin()
8. atan()
9. atan2()
10. attr
11. blur()
12. brightness()
13. calc-size()
14. calc()
15. circle()
16. clamp()
17. color-mix()
18. color()
19. conic-gradient()
20. contrast-color()
21. contrast()
22. cos()
23. counter()
24. counters()
25. cross-fade()
26. cubic-bezier()
27. device-cmyk()
28. drop-shadow()
29. dynamic-range-limit-mix()
30. element()
31. ellipse()
32. env()
33. exp()
34. fit-content()
35. grayscale()
36. hsl()
37. hue-rotate()
38. hwb()
39. hypot()
40. if()
41. image-set()
42. image()
43. inset()
44. invert()
45. lab()
46. lch()
47. light-dark()
48. linear-gradient()
49. linear()
50. log()
51. matrix()
52. matrix3d()
53. max()
54. min()
55. minmax()
56. mod()
57. oklab()
58. oklch()
59. opacity()
60. paint()
61. param()
62. path()
63. perspective()
64. polygon()
65. pow()
66. progress()
67. radial-gradient()
68. random()
69. ray()
70. rect()
71. rem()
72. repeat()
73. repeating-conic-gradient()
74. repeating-linear-gradient()
75. repeating-radial-gradient()
76. rgb()
77. rotate()
78. rotate3d()
79. rotateX()
80. rotateY()
81. rotateZ()
82. round()
83. saturate()
84. scale()
85. scale3d()
86. scaleX()
87. scaleY()
88. scaleZ()
89. sepia()
90. shape()
91. sibling-count()
92. sibling-index()
93. sign()
94. sin()
95. skew()
96. skewX()
97. skewY()
98. sqrt()
99. steps()
100. superellipse()
101. symbols()
102. tan()
103. translate()
104. translate3d()
105. translateX()
106. translateY()
107. translateZ()
108. type()
109. url()
110. var()
111. xywh()

<flex>

In this article

Help improve MDN