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

投稿日：2017年5月26日更新日：2020年5月8日

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

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

Contents

1 flexbox
2 ソース
3 参考文献・リンク

flexbox

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

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

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

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

ソース

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

index.html

<!DOCTYPE html>
<html lang="ja">
    <meta charset="UTF-8">
    <title>flex</title>
    <link rel="stylesheet" href="style.css">
    <body>
        <div class="flex-container">
            <div class="flex-item">list1</div>
            <div class="flex-item">list2</div>
            <div class="flex-item">list3</div>
        </div>
    </body>
</html>

<!DOCTYPE html>

<body>

</div>

</body>

</html>

style.css

@charset 'UTF-8';

.flex-container{
  paddgin:10px 0;
  display:flex;　//親となる要素にこの一行を加えるだけでOKです。
  border:1px solid #cc;
  background:#fff0e3;
}

.flex-item{
  margin-left:10px;
  padding:10px;
  border:1px solid #ccc;
  background: #fff;
}

@charset 'UTF-8';

.flex-container{

paddgin:10px 0;

display:flex;　//親となる要素にこの一行を加えるだけでOKです。

border:1px solid #cc;

background:#fff0e3;

}

.flex-item{

margin-left:10px;

padding:10px;

border:1px solid #ccc;

background: #fff;

}

参考文献・リンク

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

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

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

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

Flexboxレイアウトまとめ

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

flexbox

ソース

参考文献・リンク

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