You are viewing the deprecated 0.9.2 version of the website. Click here to view the latest version

Flexbox helpers

Helpers for all Flexbox properties

New! 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`

This page is open source. Noticed a typo? Or something unclear?
Improve this page on GitHub

#native_company# #native_desc#

The official Bulma book cover

New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:

PDF Epub Mobi

or

Kindle

PDF + Epub + Mobi Buy from

Kindle version Buy from

Or download a free sample!