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

boostrapでのヘッダーナビ作成

昔から私の作るWEBアプリはデザインがめちゃくちゃなことが多かったんですが、最近は多少デザインにも気を配るようになってきました。 実はCSSがあまり得意ではなくて、うまく組むためにかなり苦戦していまし …

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …

no image

lessサンプル

lessのサンプル Contents1 lessファイル構成2 ソース3 注意点4 参考リンク lessファイル構成 header,footer sytle 変数 lib 関数 common head …

no image

実務でCSSを書く時のポイントについて

先月にかなりたくさんCSSを書いたんでその時感じたポイントみたいなものを。 Contents1 いきなりかかずにまず共通部分をみつける2 見た目の調整には紙に印刷して横においておく3 色や幅、フォント …

no image

flexについて

CSSのflexをちょこちょこ使ってます。 以前下記リンクで超簡単なサンプルは動かしましたが、実践的なことは何もやっていませんでした。 css flexbxについてどんなことができるのか 使って思った …