ドツボにハマったFlexboxでのコラム化

投稿日：2023年1月19日

前回のブログでコラム化するにはCSSの column-count を使用するのが定石だとお伝えしました。
が、column-count の存在をすっかり忘れており、Flexboxでコラム化する方法を検証していました。
せっかくなのでネタにしたいと思います。
作ったものです。動作は前回のと同じです。

要素数：

コラム数：

ここに表示されます。

HTML

<div id="elementsNumWrap">
    <p>要素数：</p>
    <input type="text" placeholder="要素数を入力">
  </div>
  <div id="columnWrap">
    <p>コラム数：</p>
    <select name="columnNum" id="columnNum">
      <option value>選択してください。</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
  </div>

  <div id="contentsWrap"></div>

▲HTMLは前回と変わらず、要素数の入力欄とコラム数のプルダウンメニュー、それとID値 contentsWrap だけです。
contentsWrap にJavaScriptで実行したコンテンツを入れます。

JavaScript

// ▼▼▼ 要素数入力
$('#elementsNumWrap input').change(function () {
  $('#contentsWrap').css({
    flexDirection: 'column',
    alignItems: 'center'
  }); // 縦並びにし中央合わせ
  $('.flexContent').unwrap('.column'); //属性値columnのdiv要素を削除
  $('#contentsWrap').empty(); //一度、要素を空にする
  $('#columnNum').val(''); // プルダウンメニューを初期化（「選択してください。」）

  elementsNum = $('#elementsNumWrap input').val(); //入力値

  for (let i = 1; i <= elementsNum; i++) { //コンテンツ追加
    $('#contentsWrap').append('<p class="flexContent">' + i + '</p>');
  }
  $('.flexContent').css('width', '95%'); //幅を95%
});

// ▼▼▼ コラム数変更
$('#columnNum').change(function () {
  $('.flexContent').unwrap('.column'); //属性値columnのdiv要素を削除
  let contentLength = $('.flexContent').length; // コンテンツの総数を取得
  let turningNum = $('#columnNum').val(); //プルダウンで選択した数を取得

  if (turningNum > 1) { //「2」以上の場合
    $('#contentsWrap').css({
      flexDirection: 'initial',
      alignItems: 'flex-start'
    }); //縦並びを初期化し頭合わせ

    for (j = 0; j < turningNum; j++) { //プルダウンの数値でコンテンツ数を割った数（切り上げ）をdiv要素で包含する
      $('.flexContent').slice(Math.ceil(contentLength / turningNum) * j, (Math.ceil(contentLength / turningNum) * (j + 1))).wrapAll('<div class="column" />');
    }
    $('.flexContent').css('width', 'initial'); //幅を初期化

    // プルダウンで「1」、属性値columnが親要素の場合
  } else if (turningNum == 1 && $('.flexContent').parent().find('.column') || turningNum == '') {
    $('#contentsWrap').css({
      flexDirection: 'column',
      alignItems: 'center'
    }); // 縦並びにし中央合わせ
    $('.flexContent').unwrap('.column'); //属性値columnのdiv要素を削除
    $('.flexContent').css('width', '95%'); //幅を95%
  }
});

▲31〜33行目でコラム化しています。
Math.ceil で切り上げしているのは、最終列で要素数を調整するためです。
Math.ceil で切り上げしないと下図のように不揃いになります。
その他のコードはコメントに書いた通り、要素や値を追加したり削除したりして調整しています。

まとめ

かなり複雑なことをしてドツボにはまってしまいました。
column-count のことを思い出すのに時間がかかりました。
勉強不足、経験不足なことは否めないです。。。
と、あえて失敗談を載せてみました。

なお、ソースコードはご自由に使っていただいても構いませんが、不備など起こっても責任は負いませんのでご了承ください。

最後まで読んでいただき、ありがとうございました。