flexboxフレックスボックスの使い方


備考

このセクションでは、flexboxの概要、および開発者がそれを使用する理由を概説します。

また、フレックスボックス内の大きなテーマについても言及し、関連するトピックにリンクする必要があります。フレックスボックスのドキュメントは新しいものなので、それらの関連トピックの初期バージョンを作成する必要があります。

バージョン

Flexboxのコンテナとアイテム

フレックスボックスまたはフレキシブルボックスは、コンテンツをページ上に予測可能に配置するためのレイアウト方法です。 Flexboxは、浮動小数点を使用する従来のブロックモデルの配置、またはページ上のコンテンツのテーブルのような配置までの改善を提供します。

その中核となるFlexboxは、親要素(フレックスコンテナ)と子要素(フレックス項目)に分類できます。

フレックスコンテナ

フレックスコンテナは、displayプロパティをflexに設定することで作成できます。

.container {
  display: flex;
}
 

フレックスアイテム

フレックスコンテナのすべての子要素はフレックスアイテムになります。これらのフレックスアイテムは、追加のプロパティを受け取ってページ上の位置を変更することができます。

.item {
  flex: 1;
}
 

このflex: 1 プロパティは、 flex-grow: 1 略語であり、コンテナ内の兄弟に対して相対的に成長できるようにします。

これらをまとめるとHTMLマークアップになります:

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
 

Flexboxの紹介

CSS3で導入されたFlexbox(フレキシブルボックス)レイアウトは、コンテナ要素( flex container )内の子要素( flex items )間のスペースをレイアウト、整列、および分散するためのより効率的な方法を提供します。最も重要なのは、サイズが不明または動的な場合でも、「フレックス」または「フレキシブル」という用語です。

基本から始め、コンテナをフレックスとして初期化する方法を見ていきましょう。

次のマークアップを考えてみましょう。

<div class="flex-container">
  <div class="flex-item-1"></div>
  <div class="flex-item-2"></div>
  <div class="flex-item-3"></div>
</div>
 

flexboxは単にdisplay: flex を使って初期化されます。完了!

.flex-container {
  height: 100px;
  padding: 10px;
  background: grey;

  display: flex; // or display: inline-flex;
}
 

フレックスコンテナが準備完了したので、それぞれのフレックスアイテムでそれぞれ25%の幅を持ち、フレックスアイテムを親コンテナの内側に水平に中央に整列させて遊びましょう。

.flex-item-1 {
  width: 25%;
  background: green;
}

.flex-item-2 {
  width: 25%;
  background: purple;
}

.flex-item-3 {
  width: 25%;
  background: pink;
}
 

注意しておきますが、3人の子供にそれぞれ25%の幅を与えて、フレックスボックス内で子供たちの周りをどれくらい簡単に動かせるかを示しています。

今度は上記のコードを実行すると、コンテナ内の3人の子供が横に横に見えるはずです。これは、デフォルトではflex-direction: row ボックスにはflex-direction: row というプロパティがあるからです。デフォルトでは、フレックスアイテムは水平に並べられます。また、子供の幅が100%まで増えていないので、右側に隙間があるはずです。

次に、プロパティjustify-content: centerflex-container 追加してみましょう。

.flex-container {
  ...
  justify-content: center;
}
 

その結果、子どもたちは水平に中心を合わせることになるでしょう。同じプロパティには、 flex-end (右揃え)、 space-around (アイテムspace-between 等しいスペース)、 space-between (アイテム間の等しいスペース)などの他の値があります。

重要: text-align: center などの他のブロック要素のプロパティは、flex要素には影響しません。

インストールまたはセットアップ

FlexboxはWorld Wide Web Consortiumによって標準化されたCSS3モジュールです。ページレイアウトが異なる表示サイズに対応しなければならないとき、エレメントが予測可能に挙動するように、エレメント配置のためのレイアウトモードである。

それはCSS3の一部なので、何もインストールする必要はありません。これは、ブラウザがサポートしている限り使用することができ、ほとんどの最新のブラウザで使用できます。お使いのブラウザがそれをサポートしているかどうかを確認するには、 互換性の図があります。

CSSでdisplay: flex flexbox を設定して使用するには、 display: flex をセレクタに追加するだけです。