弹性盒子(Flexbox)辅助类

面向所有具有弹性盒子(Flexbox)属性的辅助类

Since 0.9.1

联合使用 is-flex 时,所有弹性盒子 CSS 属性 就都赋予了 Bulma 辅助类:

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

Flex 方向 #

属性:值
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 封装 #

属性:值
is-flex-wrap-nowrap flex-wrap: nowrap
is-flex-wrap-wrap flex-wrap: wrap
is-flex-wrap-wrap-reverse flex-wrap: wrap-reverse

内容调整 #

属性:值
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

内容对齐 #

属性:值
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

项目对齐 #

属性:值
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

自我对齐 #

属性:值
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 增长和 Flex 收缩 #

属性:值
增长
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
收缩
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

Made with Bulma 此页面为开放源码页面。 发现排版问题?或者表达模糊?
在 GitHub 改进该页内容

#native_company# #native_desc#
#native_cta#

简讯 功能、版本、展柜……实时新闻滚动发布!