Specification test cases
The test cases below are imported from the Turbo CSS specification.
They have been executed upon loading this page.
Stretch flex items to fit the available space, ignoring initial sizes.
t1 flex-1
.t1.flex-1 {
flex: 1 1 0%;
}
Stretch flex items to fit the available space, considering their initial sizes.
t1 flex-auto
.t1.flex-auto {
flex: 1 1 auto;
}
Shrink flex items to fit the available space if necessary, considering their initial sizes.
t1 flex-initial
.t1.flex-initial {
flex: 0 1 auto;
}
Do not grow or shrink.
t1 flex-none
.t1.flex-none {
flex: none;
}
Flex with 2 arguments.
t1 flex-1-2
.t1.flex-1-2 {
flex: 1 2 0%;
}
Flex with 3 arguments.
t1 flex-1-2-0%
.t1.flex-1-2-0\% {
flex: 1 2 0%;
}
Flex with 3 arguments, the flex-basis argument
provided in pixel unit.
t1 flex-1-2-20px
.t1.flex-1-2-20px {
flex: 1 2 20px;
}
Flex with 3 arguments, the flex-basis being 0px.
The CSS declaration uses 0%.
t1 flex-1-2-0px
.t1.flex-1-2-0px {
flex: 1 2 0%;
}
When using flex with 3 arguments, the unit must be
provided for the flex-basis argument.
t1 flex-1-2-3
Error: invalid arguments passed to utility function [flex] in [flex-1-2-3]