Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

display:flexの学習 その0001-01 ほんとに基礎のこと

参考にさせて頂いたページ

flexible box の利用

CSS flexible box の利用 - CSS | MDN

flexプロパティについて

flex - CSS | MDN

用語について

まずは「CSS flexible box の利用 - CSS | MDN」に書いてある用語を理解しておくとよさそうです。 その中でも以下の用語は、flexに関連するCSSプロパティの説明などを理解するのに特に必要そうです。

  • flexコンテナ
  • flexアイテム
  • main axis(主軸)
  • cross axis(交差軸)
  • main start(主軸方向のスタート側)
  • main end(主軸方向のエンド側)
  • cross start(交差方向のスタート側)
  • cross end(交差方向のエンド側)

今日試している環境

windows10で以下のブラウザで試しています。

サンプルコード

以下のように書いてみました。

<style>
.flex{
  display: flex;
  height: 600px;
  background-color: #eeeeee;
}
.flex :nth-child(1){background-color: #ffeeee;}
.flex :nth-child(2){background-color: #eeffee;}
.flex :nth-child(3){background-color: #eeeeff;}
.flex :nth-child(4){background-color: #ffffee;}
.flex :nth-child(5){background-color: #eeffff;}
</style>

<div class="flex">
  <div>flexアイテム nth-child(1)</div>
  <div>flexアイテム nth-child(2)<br>テキスト</div>
  <div>flexアイテム nth-child(3)<br>テキスト<br>テキスト</div>
  <div>flexアイテム nth-child(4)<br>テキスト<br>テキスト<br>テキスト</div>
  <div>flexアイテム nth-child(5)<br>テキスト<br>テキスト<br>テキスト<br>テキスト</div>
</div>

サンプルコードについて

.flexdisplay:flex;を設定しています。これが「flexコンテナ」です。 これを設定すると、子要素は「flexアイテム」となるため、div要素は横に並びます。

その他のcssプロパティはflexとは関係ないのですが、flexアイテムがどのような領域を占めるのか、自分自身が理解するためにつけています。

5個のflexアイテムはそれぞれ、親要素であるflexコンテナの高さいっぱいに600pxで表示され、横幅はテキストが入る最小幅となりました。

試した3つのブラウザはベンダープレフィックス無しで、同じように表示されました。

初期値の変更について

今回のサンプルコードでは、親要素にdisplay:flex;を設定するだけで最小幅のdivを横並びにできて、高さはflexコンテナいっぱいに広がる。というものになりましたが、フレキシブルなレイアウトを可能にする為に以下のようなプロパティがあるようです。

W3Cのページなどで最新の仕様を確認するとよさそうです。

display:inline-flexについて

今回はdisplay:flex;を使用したため、「flexコンテナ」は横幅いっぱいに広がりましたが、display:inline-flex;を使用すると、「flexコンテナ」の幅は最小幅にできます。