bootstrap4 alpha6 で pull-right / float-right する（カラムの右寄せ）

みんな大好き bootstrap4 の alpha6 がリリースされましたね！
しかし4のリリースから随分経つのにまだ alpha ってどういうこと？ GitHUB人気No.1クラスなのにそんなにのんびりな開発で良い訳？…と思っていましたが、alpha6 は今までとの互換性をバッサリ切り捨てた仕様変更が結構多くてビビります。その中でもトップクラスの変更が「Gridにflexを使うようになった」ということ。

flex-last を使う

というわけで、flexなので当然 pull-right も float-right も使えません。代わりに用意されているのが、flex-first / flex-last というクラスです。下記のようにします。

<div class="container">
  <div class="row">
    <main class="col-12 col-lg-9 flex-lg-last">
      <!-- LG以上の画面幅で右側になるメインカラム -->
    </main>
    <aside class="col-12 col-3">
      <!-- LG以上の画面幅で左側になるサイドバーカラム -->
    </aside>
  </div>
</div>

正確に言うと、floatのように右に寄せるものではなく、flexの順序 order を変更するものです。last を複数に付けたら、きっと意図しない結果になります。

bootstrap.css

@media (min-width: 1199px) {
  .flex-lg-first {
    order: -1;
  }
  .flex-lg-last {
    order: 1;
  }
  .flex-lg-unordered {
    order: 0;
  }
  /* .... */

order-last ？　order-1 ？

すみません。あらためてGitHUBのソースコードを見に行ってみたら、flex-last が見つからなくて、代わりに、order-lg-last とか、 order-lg-1, order-lg-2... といったクラスを見つけました。こういう書き方に変わったのかもしれません。

以上！

できたてほやほやのflex。やっぱりこのあたりの仕様はそれだけ軟らかいのでしょうか。近いうちにもう少し調査・検証して書き足します。ひとまず備忘録として。