<flex>
Quick Summary for flex_value#fr
The
<flex>
CSS data type denotes a flexible length within a grid container. It is used in grid-template-columns
, grid-template-rows
and other related properties.
Code Usage for flex_value#fr
1fr /* Using an integer value */ 2.5fr /* Using a float value */
More Details for flex_value#fr
<flex>
The <flex>
CSS data type denotes a flexible length within a grid container. It is used in grid-template-columns
, grid-template-rows
and other related properties.
Syntax
The <flex>
data type is specified as a <number>
followed by the unit fr
. The fr
unit represents a fraction of the leftover space in the grid container. As with all CSS dimensions, there is no space between the unit and the number.
Examples
Examples of correct values for the fr data type
1fr /* Using an integer value */ 2.5fr /* Using a float value */
Example of use in a tracklisting for CSS Grid layout
.grid { display: grid; grid-template-columns: 1fr 1fr 2.5fr 1.5fr; }
Specifications
Specification |
---|
CSS Grid Layout Module Level 3 # fr-unit |
See also
CSS Grid Layout Select your preferred language English (US)Français日本語Русский中文 (简体) Change language Posted in
12:22 am, February 22, 2022
Add Comment
Other Items in CSS
rgb()
rgba()
:right
right
@right-bottom
:root
rotate
rotate()
rotate3d()
rotateX()
rotateY()
rotateZ()
row-gap
ruby-align
ruby-position
saturate()
scale
scale()
scale3d()
scaleX()
scaleY()
scaleZ()
:scope
scroll-behavior
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-align
scroll-snap-stop
scroll-snap-type
@scroll-timeline