CSSFlexbox _
1
2
3
4
5
6
7
8
CSSFlexboxレイアウトモジュール
Flexboxレイアウトモジュールの前には、4つのレイアウトモードがありました。
- ウェブページのセクションのブロック
- インライン、テキスト用
- テーブル、2次元テーブルデータ用
- 要素の明示的な位置のために配置されます
フレキシブルボックスレイアウトモジュールを使用すると、フロートやポジショニングを使用せずに、柔軟でレスポンシブなレイアウト構造を簡単に設計できます。
ブラウザのサポート
フレックスボックスのプロパティは、最新のすべてのブラウザでサポートされています。
| 29.0 | 11.0 | 22.0 | 10 | 48 |
Flexbox要素
Flexboxモデルの使用を開始するには、最初にフレックスコンテナを定義する必要があります。
1
2
3
上記の要素は、3つのフレックスアイテムを含むフレックスコンテナ（青い領域）を表しています。
例
3つのフレックスアイテムを含むフレックスコンテナ：
<div
class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
次の章では、フレックスコンテナとフレックスアイテムについて詳しく学習します。