SUIT CSS: flex tests

.u-flex

creates a flex container

1. item should be in a row
2. item should be in a row

.u-flexInline

creates an inline flex container

flex container should be in a row
flex container should be in a row
flex container should be in a row

.u-flexRow

displays items in a row

1. item should be in a row
2. item should be in a row
3. item should be in a row
1. item should be in a row
5. item should be in a row
6. item should be in a row

.u-flexRowReverse

reverses items in a row

1. item should be in a row
2. item should be in a row
3. item should be in a row
4. item should be in a row
5. item should be in a row
6. item should be in a row

.u-flexCol

displays items in a column

1. item should be in a column
2. item should be in a column
3. item should be in a column
4. item should be in a column
5. item should be in a column
6. item should be in a column

.u-flexColReverse

reverses items in a column

1. item should be in a column
2. item should be in a column
3. item should be in a column
4. item should be in a column
5. item should be in a column
6. item should be in a column

.u-flexWrap

wraps items onto next line when container is too small

1. item should be wrapped when no space left
2. item should be wrapped when no space left
3. item should be wrapped when no space left
4. item should be wrapped when no space left
5. item should be wrapped when no space left
6. item should be wrapped when no space left

.u-flexNoWrap

keeps items in a single row regardless of container size

1. item should be on one line
2. item should be on one line
3. item should be on one line
4. item should be on one line
5. item should be on one line
6. item should be on one line

.u-flexWrapReverse

reverses wrapped items

1. item should be wrapped when no space left
2. item should be wrapped when no space left
3. item should be wrapped when no space left
4. item should be wrapped when no space left
5. item should be wrapped when no space left
6. item should be wrapped when no space left

.u-flexJustifyStart

items are aligned to the left side of the main axis

1. item should be aligned left
2. item should be aligned left
3. item should be aligned left

.u-flexJustifyEnd

items are aligned to the right side of the main axis

1. item should be aligned right
2. item should be aligned right
3. item should be aligned right

.u-flexJustifyCenter

items are in the center of the main axis

1. item should be center
2. item should be center
2. item should be center

.u-flexJustifyBetween

items have space between each other on main axis

1. item should have space between
2. item should have space between
3. item should have space between

.u-flexJustifyAround

items have space around each other on main axis

1. item should have space around
2. item should have space around
3. item should have space around

.u-flexAlignItemsStretch

stretch to fill the container

1. item should stretch from top to bottom
2. item should stretch from top to bottom
3. item should stretch from top to bottom
4. item should stretch from top to bottom
5. item should stretch from top to bottom
6. item should stretch from top to bottom

.u-flexAlignItemsStart

cross-start margin edge of the items is placed on the cross-start line

1. item should be at top of the container
2. item should be at top of the container
3. item should be at top of the container
4. item should be at top of the container
5. item should be at top of the container
6. item should be at top of the container

.u-flexAlignItemsEnd

cross-end margin edge of the items is placed on the cross-end line

1. item should be at bottom of the container
2. item should be at bottom of the container
3. item should be at bottom of the container
4. item should be at bottom of the container
5. item should be at bottom of the container
6. item should be at bottom of the container

.u-flexAlignItemsCenter

items are centered in the cross-axis

1. item should be vertically centred
2. item should be vertically centred
3. item should be vertically centred
4. item should be vertically centred
5. item should be vertically centred
6. item should be vertically centred

.u-flexAlignItemsBaseline

items have their baselines aligned on the cross axis

1. item should be aligned on the baseline
2. item should be aligned on the baseline
3. item should be aligned on the baseline
4. item should be aligned on the baseline
5. item should be aligned on the baseline
6. item should be aligned on the baseline

.u-flexAlignContentStart

items are packed to the start of the container

1. item should be aligned to the top
2. item should be aligned to the top
3. item should be aligned to the top
4. item should be aligned to the top
5. item should be aligned to the top
6. item should be aligned to the top

.u-flexAlignContentEnd

items are packed to the end of the container

1. item should be aligned to the bottom
2. item should be aligned to the bottom
3. item should be aligned to the bottom
4. item should be aligned to the bottom
5. item should be aligned to the bottom
6. item should be aligned to the bottom

.u-flexAlignContentCenter

lines packed to the centre of the container

1. item should be aligned to the centre
2. item should be aligned to the centre
3. item should be aligned to the centre
4. item should be aligned to the centre
5. item should be aligned to the centre
6. item should be aligned to the centre

.u-flexAlignContentStretch

lines stretch to take up the remaining space

1. item should be stretched on the cross axis
2. item should be stretched on the cross axis
3. item should be stretched on the cross axis
4. item should be stretched on the cross axis
5. item should be stretched on the cross axis
6. item should be stretched on the cross axis

.u-flexAlignContentBetween

lines evenly distributed; the first line is at the start of the container while the last one is at the end

1. item should be at the start of the cross axis
2. item should be at the start of the cross axis
3. item should be at the start of the cross axis
4. item should be at the end of the cross axis
5. item should be at the end of the cross axis
6. item should be at the end of the cross axis

.u-flexAlignContentAround

lines evenly distributed with equal space around each line

1. item should have space around
2. item should have space around
3. item should have space around
4. item should have space around
5. item should have space around
6. item should have space around

.u-flexAlignSelfStart

aligns single item at cross axis start

1. item should be at the top
2. item should be at the bottom
3. item should be at the bottom

.u-flexAlignSelfEnd

aligns single item at cross axis end

1. item should be at the bottom
2. item should be at the top
3. item should be at the top

.u-flexAlignSelfCenter

aligns single item at cross axis centre

1. item should be in the centre
2. item should be at the top
3. item should be at the top

.u-flexAlignSelfStretch

stretches single item from cross start to end

1. item should be stretched from top to bottom
2. item should be at the top
3. item should be at the top

.u-flexOrderFirst

positions an item at the start

1. default order
2. default order
3. item should be first

applies to multiple elements

1. default order
2. item should be first
3. item should be second
4. default order
5. default order

.u-flexOrderLast

positions an item at the end

1. item should be last
2. default order
3. default order

applies to multiple elements

1. item should be second from last
2. item should be last
3. default order
4. default order
5. default order

u-flexGrowX

specify the flex grow factor

1. flexGrow1
2. flexGrow3
3. flexGrow2
1. flexGrow5
2. flexGrow4
1. flexGrow1
2. flexGrow2
3. flexGrow1

.u-flexShrinkX

specify the flex shrink factor

1. flexShrink3
2. flexShrink1
3. flexShrink1
1. flexShrink0
2. flexShrink1
3. flexShrink3

.u-flexExpandLeft

expand child margins to the left using remaining space along main axis

1.
2.
3. item should be pushed to the right

.u-flexExpandRight

expand child margins to the right using remaining space along main axis

1. item should be pushed to the left
2.
3.

.u-flexExpandTop

expand child margins to the top using remaining space along main axis

1.
2. item should be pushed to the bottom
3. item should be pushed to the bottom

.u-flexExpandBottom

expand child margins to the bottom using remaining space along main axis

1. item should be pushed to the top
2. item should be pushed to the top
3.

.u-flexExpand

center child using remaining space along main axis

1. item should be centered in remaining horizontal space
2.
3.

.u-sm-flexJustifyEnd / u-md-flexJustifyCenter / u-lg-flexJustifyAround

adapts the flexJustifyX at different widths

1.
2.
3.

Adjusting item size (requires utils-size)

only apply size to first two items

1. 4of12
2. 4of12
3. none

use u-sizeFill to take up remaining space

1. 1of4
2. 1of4
3. sizeFill

.u-flexBasisAuto

Overrides the flex-basis value

1.
2.

.u-flexBasis0

Overrides the flex-basis value

1.
2.

.u-flexInitial

Sizes the item based on the width/height properties

1.
2. some content

.u-flexAuto

Sizes the item based on the width/height properties, but makes them fully flexible, so that they absorb any free space along the main axis.

1.
2. some content

.u-flexNone

Sizes the item according to the width/height properties, but makes the flex item fully inflexible. Similar to initial, except that flex items are not allowed to shrink, even in overflow situations. Should overflow container in this test.

1.
2. some content