Flexbox helpers

Flexbox helpers (플렉스박스 헬퍼)

is-flex와 함께 쓰면 모든 Flexbox CSS 속성을 Bulma 헬퍼로 사용할 수 있어요. 클래스 하나로 정렬과 배치를 쉽게 조절할 수 있어요.

출처: 문서

본문

is-flex와 함께, 모든 Flexbox CSS 속성을 Bulma 헬퍼로 사용할 수 있어요:

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

Flex direction (플렉스 방향)

클래스 속성: 값
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 (플렉스 줄바꿈)

클래스 속성: 값
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 (주축 정렬)

클래스 속성: 값
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 (교차축 정렬)

클래스 속성: 값
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 (항목 정렬)

클래스 속성: 값
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 (개별 항목 정렬)

클래스 속성: 값
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와 flex shrink (플렉스 확장·축소)

클래스 속성: 값
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

더 알아보기 (Learn more)