UIkit Flex - フロントエンドフレームワークUIkitにFlex機能が追加

Geeklog
投稿者: 表示回数2,114

フロントエンドフレームワークのUIkitがまた機能アップ。Flexレイアウトが充実しました。2015/2/20が最新。

http://getuikit.com/docs/flex.html

class="uk-flex"で左寄せ
class="uk-flex uk-flext-right" で右寄せ
class="uk-flex uk-flext-enter" でセンタリング

縦方向も、 uk-flex-top uk-flex-middle uk-flex-bottomで揃えられます。

左寄せ

Box
Box
Box

センタリング

Box
Box
Box

右寄せ

Box
Box
Box

縦上合わせ

Box
Box
Box

縦センタリング

Box
Box
Box

縦下あわせ

Box
Box
Box

UIkitは、LESS Sass対応。class名やJavascript関数に前置子がつくため、他所から配布されるものとコンフリクトを起こさず安心して利用できるのがメリット。コンパクトな記述で多様な表現が可能です。