Fix Flexbox

css flexbox レイアウトで理想通りのレイアウトを実現できるように fix する機能です。これは RADIX の中で最も地味で使いどころの分からない機能かもしれません。

Options

const radix = new Radix({
    flexFix: {
        active: true,  // 機能のオン、オフ（boolean）
        selector: '.radix-flexfix',  // セレクタ
        inherit: true,  // 子要素も複製するか
        min: 0  // ダミー要素の最小個数
    }
});

What is this function?

この機能については、ぱっと見では意味が分からないと思うので、例を示しながら解説します。
このページの説明を理解するにはブラウザの大きさを調節しながら見る必要がある為、パソコンから閲覧することを推奨します。

あなたが制作しているページで以下のような折り返し可能な横並びボックスのレイアウトを実現したいとき、どのように実装するでしょうか？多くの人は Flexbox を利用すると思いますし、現時点での最適はそれで間違いないでしょう。

<div class="flexfix-demo">
<div class="box">１</div>
<div class="box">２</div>
<div class="box">３</div>
<div class="box">４</div>
<div class="box">５</div>
<div class="box">６</div>
<div class="box">７</div>
<div class="box">８</div>
<div class="box">９</div>
</div>

この要素を中央揃えにしたい、と考えたときはどうすればいいでしょうか？
スマートフォン表示をする場合、カラム落ちをさせて1カラムにしなくてはなりません。1カラムなのに要素がセンタリングされておらず片側によっているのは、意図的でないならば美しくないでしょう。

それをするには justify-content: center を使うというのが最もわかりやすい解でしょう。しかし、この方法では以下のように、行ごとの列位置ががずれてしまう他、1つや2つのみ折り返されているときにそれが真ん中に寄ってしまい見た目が悪いという問題があります。

<div class="flexfix-demo center">
<!-- 省略 -->
</div>

では、space-between や space-around ではどうでしょうか？これも理想通りのレイアウトにはなりません。

<div class="flexfix-demo space-around">
<!-- 省略 -->
</div>

<div class="flexfix-demo space-between">
<!-- 省略 -->
</div>

私がほしいのは text-align: justify を与えたテキストのような、要素数が十分に足りている行は中央に整列させ、要素数が足りない最後の行だけ、それまでの行の配置に合うように左側から埋めていく。というようなレイアウトです。

これを実現するには、現在のCSSプロパティのみでは不可能です。その為、javascript を使ってダミー要素を追加し、横幅のみレイアウトに干渉させることです。それを動作させるためのセレクタとしてこの flexfix 機能があります。

<div class="flexfix-demo center radix-flexfix">
<!-- 省略 -->
</div>

これを用いることで、センタリングできているにも関わらず、要素数の足りない行の列位置がずれるというレイアウトの問題を改善することができます。

注意点として、row-gap を用いて縦方向の要素を干渉させてしまうと、ダミーの分余分な空白が生じてしまいます。flexfix を用いるときは、子要素それぞれに margin を設定することでレイアウトする必要があります（column-gap は問題ありません）。

軽量化の為、デフォルトでは inherit オプションが false になっており、ダミー要素には子孫要素がコピーされていません。リストの中に画像を設置しており、横幅をそれに基づいて定めているときなど、子孫要素もコピーする必要があるときは inherit を true にします。