CSS フレックスボックス
1
2
3
4
5
6
7
8
自分で試してみる »
CSSフレックスボックスレイアウトモジュール
フレックスボックスレイアウトモジュールの前には、4つのレイアウトモードがありました。
- ブロック、ウェブページのセクション
- インライン、テキスト用
- テーブル、2次元テーブルデータの場合
- 配置済み、要素の明示的な位置
フレキシブルボックスレイアウトモジュールを使用すると、フロートやポジショニングを使用せずに、柔軟でレスポンシブなレイアウト構造を簡単に設計できます。
ブラウザのサポート
flexboxのプロパティは、最新のすべてのブラウザーでサポートされています。
| 29.0 | 11.0 | 22.0 | 10 | 48 |
フレックスボックス要素
フレックスボックスモデルの使用を開始するには、最初にフレックスコンテナーを定義する必要があります。
1
2
3
上記の要素は、3つのフレックスアイテムを持つフレックスコンテナー(青色の領域)を表します。
例
3 つのフレックスアイテムを含むフレックスコンテナー:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
フレックスコンテナーとフレックスアイテムについては、次の章で詳しく説明します。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。