<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

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Don't look to be the next Facebook, try to solve a real problem instead.
Unknown
Random CSS Property

direction

The direction CSS property sets the direction of text, table columns, and horizontal overflow. Use rtl for languages written from right to left (like Hebrew or Arabic), and ltr for those written from left to right (like English and most other languages).
direction css reference