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

テンプレートエンジンTwigについて

SmartyにかわるテンプレートエンジンとしてTwig(ツィッグ)を勉強中。 といってもテンプレートエンジンなので基本的なことはほとんど一緒っぽいですが。 Contents1 インストール2 基本的な …

no image

固定されたナビ(ヘッドとサイド)

boostrapでサイトを作るときにヘッダーとサイドバーを固定したいときについてメモします。 Contents1 ヘッダーを固定したい場合2 サイドバーを固定したい場合3 参考リンク ヘッダーを固定し …

no image

CSS positionについて

本日はpositionについて。 要素を通常、配置される場所から別の場所に配置させたいような場合positionを使います。 Contents1 positionの使い方1.1 相対配置 relati …

no image

tableのレイアウトに関して

tableのcssに関して。 https://github.com/umanari145/css 幅を決めるのでも%表記をしたいときはauto、数値固定で行きたいときはfixed。 詳しくはリンクのt …

no image

css tips display:table,marginの相殺,font-size指定,margin上下の%など

昨日、喫茶店でみていた参考書でみたCSSのネタに関して忘れないようにメモ。 Contents1 display:table2 inputのfocus時の青を消す3 marginの相殺4  font-s …