Combined with is-flex, all of the
Flexbox CSS properties are available as Bulma helpers:
flex-directionflex-wrapjustify-contentalign-contentalign-itemsalign-selfflex-growflex-shrink
Sponsor
Flexbox helpers
对弹性盒的所有参数进行配置
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
|