Flexbox helpers

Helpers for all Flexbox properties

Since 0.9.1

Combined with is-flex, all of the Flexbox CSS properties are available as Bulma helpers:

  • flex-direction
  • flex-wrap
  • justify-content
  • align-content
  • align-items
  • align-self
  • flex-grow
  • flex-shrink

Flex direction #

Class Property: Value
is-flex-direction-row flex-direction: row
is-flex-direction-row-reverse flex-direction: row-reverse
is-flex-direction-column flex-direction: column
is-flex-direction-column-reverse flex-direction: column-reverse

Flex wrap #

Class Property: Value
is-flex-wrap-nowrap flex-wrap: nowrap
is-flex-wrap-wrap flex-wrap: wrap
is-flex-wrap-wrap-reverse flex-wrap: wrap-reverse

Justify content #

Class Property: Value
is-justify-content-flex-start justify-content: flex-start
is-justify-content-flex-end justify-content: flex-end
is-justify-content-center justify-content: center
is-justify-content-space-between justify-content: space-between
is-justify-content-space-around justify-content: space-around
is-justify-content-space-evenly justify-content: space-evenly
is-justify-content-start justify-content: start
is-justify-content-end justify-content: end
is-justify-content-left justify-content: left
is-justify-content-right justify-content: right

Align content #

Class Property: Value
is-align-content-flex-start align-content: flex-start
is-align-content-flex-end align-content: flex-end
is-align-content-center align-content: center
is-align-content-space-between align-content: space-between
is-align-content-space-around align-content: space-around
is-align-content-space-evenly align-content: space-evenly
is-align-content-stretch align-content: stretch
is-align-content-start align-content: start
is-align-content-end align-content: end
is-align-content-baseline align-content: baseline

Align items #

Class Property: Value
is-align-items-stretch align-items: stretch
is-align-items-flex-start align-items: flex-start
is-align-items-flex-end align-items: flex-end
is-align-items-center align-items: center
is-align-items-baseline align-items: baseline
is-align-items-start align-items: start
is-align-items-end align-items: end
is-align-items-self-start align-items: self-start
is-align-items-self-end align-items: self-end

Align self #

Class Property: Value
is-align-self-auto align-self: auto
is-align-self-flex-start align-self: flex-start
is-align-self-flex-end align-self: flex-end
is-align-self-center align-self: center
is-align-self-baseline align-self: baseline
is-align-self-stretch align-self: stretch

Flex grow and flex shrink #

Class Property: Value
Grow
is-flex-grow-0 flex-grow: 0
is-flex-grow-1 flex-grow: 1
is-flex-grow-2 flex-grow: 2
is-flex-grow-3 flex-grow: 3
is-flex-grow-4 flex-grow: 4
is-flex-grow-5 flex-grow: 5
Shrink
is-flex-shrink-0 flex-shrink: 0
is-flex-shrink-1 flex-shrink: 1
is-flex-shrink-2 flex-shrink: 2
is-flex-shrink-3 flex-shrink: 3
is-flex-shrink-4 flex-shrink: 4
is-flex-shrink-5 flex-shrink: 5