skillup

技術ブログ

デザイン

css flexboxについて どんなことができるのか?

投稿日:

CSSを使い始めて数年がたっていますが、いまだに最適な書き方がようわかっとりません(汗)

特に難しいのが全体的なレイアウトの決定でfloatとかpositionなんかを使っていろいろと悪戦苦闘しています。

flexbox

ただ最近では、flexboxレイアウトというものが主流のようです。

私もまだ知ったばかりなのですが、今まで使っていたfloat,position,table-cellなどに代わる新しいレイアウト方法のようで画面サイズなどの変化にも対応しているようです。

ものすごく簡単に言うと下記のようなメリットがあるようです。

  • 横並びなどのレイアウトを組むのが比較的簡単に実装できる
  • 高さが違うレイアウトなどを簡単にそろえることができる
  • 上下中央ぞろえなどが比較的簡単

ソース

例えば下記のようなレイアウトを組むとします。
sample

 

index.html

style.css

参考文献・リンク

最近よんだCSSの本「はじめてのCSSの設計
https://liginc.co.jp/web/html-css/css/21024
http://www.webcreatorbox.com/tech/flexbox/
https://nulab-inc.com/ja/blog/nulab/css-basics-for-engineer-flexbox/
http://qiita.com/takanorip/items/a51989312160530d89a1

-デザイン
-

執筆者:


  1. […] css flexbxについてどんなことができるのか […]

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

sassについて

以前ちょろっと勉強していたことはあるんですが、仕事で使うことになりそうなんで復習。 Contents1 sassとは2 インストール&コンパイル3 一般的な記法など4 参考リンク sassとは 一言で …

no image

CSSのレイアウト例 その1 カラムレイアウト

本日はCSSのレイアウト例に関してよくあるものを見てみようと思います。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」を買いましょう。 …

no image

flexショートハンドに関して

実務でflexをちょこちょこ使うようになりました。 やはりfloatなどで組むことと比べると圧倒的に楽ですね・・・ んで、あまり理解してなかったショートハンド要はgrow,basis,shinkに関し …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

パララックス系のギャラリー(中央ネタ)

ギャラリー的な画像を使ったときに思ったこと。下記が画像の標準的な扱い方かな・・・ 枠自体は高さも幅も決める(li要素のwidth,heightは決める) 基本は画像要素を中央揃え(positionの5 …