skillup

技術ブログ

デザイン

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

投稿日:2017年5月26日 更新日:

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

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

flexbox

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

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

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

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

ソース

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

 

index.html

style.css

参考文献・リンク

最近よんだCSSの本「はじめてのCSSの設計

CSS3のFlexboxを基本から理解して、使い方をマスターしよう!

これからのCSSレイアウトはFlexboxで決まり!

今覚えたい!エンジニアのための CSS の基礎講座 〜Flexbox レイアウト編〜

Flexboxレイアウトまとめ

-デザイン
-

執筆者:


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

comment

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

関連記事

no image

CSSで背景画像の出力

最近はやりのWEBデザインでよくある、大きな背景画像のなかにユーザー名とパスワードを入力させるような画面の作成方法について。

基本的な …

no image

CSSの適用ルールと継承について

前回のエントリーでも書いたようにいまいちわかっていないことが多いので、復習します。 Contents1 セレクタの種類2 セレクタの詳細度3 継承 セレクタの種類 CSSのセレクタには下記のようなもの …

no image

CSS floatについて

以前もちょっと書きましたが、CSSのfloatについて。 http://skill-up-engineering.com/?p=1708への追記 親から見るとfloatした子供は存在しない状態 flo …

no image

lessについて(CSSライブラリ)

Contents1 lessって?1.1 スコープが使える1.2 変数が使える1.3 関数化1.4 インポート2 インストール3 コンパイル lessって? CSSの保守性を向上させるライブラリ。これ …

no image

sassについて

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