flexibility.jsとカラム落ち

flexibility.jsでieのflexbox対応しようと思ったらカラム落ちしたので、対応方法をメモ。

[css]
.container {
display: flex;
flex-wrap: wrap;
}
.inner {
width: 32%;
margin: 0 2% 0 0;
}
.inner:nth-of-type( 3n ) {
margin-right: 0;
}
[/css]
[html]
<div class=”container”>
<div class=”inner”>inner</div>
<div class=”inner”>inner</div>
<div class=”inner”>inner</div>
<div class=”inner”>inner</div>
<div class=”inner”>inner</div>
</div>
<!–[if lte IE 9]>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/flexibility/2.0.1/flexibility.js”></script>
<script>
window.addEventListener( “load”, function() {
flexibility(document.documentElement);
}, false );
</script>
<![endif]–>
[/html]

3カラムの一覧。とても単純。
これを fexibility.js を読み込んだ ie で表示したところ、2カラム表示となった。なぜ?

space-betweenを使用

[css]
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.inner {
width: 32%;
}
.inner:nth-child(3n+2):last-child {
margin-right: 34%;
}
[/css]

marginを space-between に任せたらうまくいった。

ちなみにspace-between + after擬似要素だとうまくいかない

3カラムだと以下のように最後にafter擬似要素を加えて最後の行のコンテンツが両端に行くのを防ぐやり方があるけど、flexibility.jsだとafter擬似要素が無視される。

[css]
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.container::after {
display: block;
content: ”;
margin-right: 34%;
}
.inner {
width: 32%;
}
[/css]

ieはいつまでたっても困らせてくるなぁ。

よく使う npx コマンド

さらっとnodeを使用したいときに使うコマンド。

Browser Sync

軽いコーディングとか、自分の環境にサーバ立てて作業していたけど他の人にも見せたいときに便利。
[shell]
# 作業ディレクトリを指定
$ npx browser-sync start -s path/to/directory
# サーバのurlを指定
$ npx browser-sync start -p www.hoge.test
[/shell]
デザイン制作時とかでも、ネットワーク内の他の人に確認してもらうのにも使える。

node-sass

[shell]
$ npx node-sass input.scss -o path/to/directory –output-style compressed
# watch
$ npx node-sass -w path/to/directory
[/shell]

macのcaffeinateコマンドでスリープを制御

長い処理を行なっているときに、macがスリープしてしまって困る場合がありますよね?私はあります。
そこで使用するのが caffeinate コマンド。

よく使うオプションがこちら。
[shell]
$ caffeinate -di
[/shell]
ディスプレイ(d)システム(i)のスリープを制御。
ctrl + c でcaffeinateを終了するまでスリープしないようになります。

何かをごっそりコピーして、時間がかかる場合には以下のようにすることもできます。
[shell]
$ caffeinate -di cp /path/to/files /path/to/output
[/shell]

参考

https://henry.animeo.jp/blog/2013/12/07/caffeinate/
https://qiita.com/hakuro/items/c2302f1ad83bf3424a1a