Flexbox helpers

Bulma documentation

Flex direction

ModifierProperty: Value
b.FlexRowflex-direction: row
b.FlexRowReverseflex-direction: row-reverse
b.FlexColumnflex-direction: column
b.FlexColumnReverseflex-direction: column-reverse

Flex wrap

ModifierProperty: Value
b.FlexNowrapflex-wrap: nowrap
b.FlexWrapflex-wrap: wrap
b.FlexWrapReverseflex-wrap: wrap-reverse

Justify content

ModifierProperty: Value
b.JustifyContentFlexStartjustify-content: flex-start
b.JustifyContentFlexEndjustify-content: flex-end
b.JustifyContentCenterjustify-content: center
b.JustifyContentSpaceBetweenjustify-content: space-between
b.JustifyContentSpaceAroundjustify-content: space-around
b.JustifyContentSpaceEvenlyjustify-content: space-evenly
b.JustifyContentStartjustify-content: start
b.JustifyContentEndjustify-content: end
b.JustifyContentLeftjustify-content: left
b.JustifyContentRightjustify-content: right

Align content

ModifierProperty: Value
b.AlignContentFlexStartalign-content: flex-start
b.AlignContentFlexEndalign-content: flex-end
b.AlignContentCenteralign-content: center
b.AlignContentSpaceBetweenalign-content: space-between
b.AlignContentSpaceAroundalign-content: space-around
b.AlignContentSpaceEvenlyalign-content: space-evenly
b.AlignContentStretchalign-content: stretch
b.AlignContentStartalign-content: start
b.AlignContentEndalign-content: end
b.AlignContentBaselinealign-content: baseline

Align items

ModifierProperty: Value
b.AlignItemsStretchalign-items: stretch
b.AlignItemsFlexStartalign-items: flex-start
b.AlignItemsFlexEndalign-items: flex-end
b.AlignItemsCenteralign-items: center
b.AlignItemsBaselinealign-items: baseline
b.AlignItemsStartalign-items: start
b.AlignItemsEndalign-items: end
b.AlignItemsSelfStartalign-items: self-start
b.AlignItemsSelfEndalign-items: self-end

Align self

ModifierProperty: Value
b.AlignSelfAutoalign-self: audo
b.AlignSelfFlexStartalign-self: flex-start
b.AlignSelfFlexEndalign-self: flex-end
b.AlignSelfCenteralign-self: center
b.AlignSelfBaselinealign-self: baseline
b.AlignSelfStretchalign-self: stretch

Flex grow and flex shrink

ModifierProperty: Value
b.FlexGrow(0)flex-grow: 0
b.FlexGrow(1)flex-grow: 1
b.FlexGrow(2)flex-grow: 2
b.FlexGrow(3)flex-grow: 3
b.FlexGrow(4)flex-grow: 4
b.FlexGrow(5())flex-grow: 5
b.FlexShrink(0)flex-shrink: 0
b.FlexShrink(1)flex-shrink: 1
b.FlexShrink(2)flex-shrink: 2
b.FlexShrink(3)flex-shrink: 3
b.FlexShrink(4)flex-shrink: 4
b.FlexShrink(5)flex-shrink: 5