Flexbox 기반의 칼럼

Flexbox 기반의 칼럼 (Columns powered by Flexbox)

Bulma로 칼럼 레이아웃을 만드는 건 정말 간단해요. columns 컨테이너와 column 요소만 추가하면 되고, 칼럼의 수와 관계없이 각 칼럼이 동일한 너비를 가지게 됩니다.

출처: 문서

본문

Bulma 칼럼 레이아웃을 만드는 방법은 아주 간단합니다:

  1. columns 컨테이너를 추가합니다.
  2. 원하는 만큼 column 요소를 추가합니다.

그러면 칼럼 개수와 상관없이 각 칼럼은 동일한 너비를 가지게 돼요.

예시 HTML:

<div class="columns">
  <div class="column">First column</div>
  <div class="column">Second column</div>
  <div class="column">Third column</div>
  <div class="column">Fourth column</div>
</div>

네 개의 칼럼을 넣었으니, 화면은 가로로 4등분되어 각각 같은 폭으로 표시됩니다.

더 알아보기 (Learn more)