TECH I.S.

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>

自分で試してみる »

フレックスコンテナーとフレックスアイテムについては、次の章で詳しく説明します。



プログラミング学習を加速させる

プログラミングをプロの講師に教えてもらいませんか。

テックアイエスのプログラミングスクールは初心者も大歓迎です。年齢制限もありません。転職・副業に強く、挫折させない手厚いサポートで稼ぐ力を身につけましょう!

スクールの詳細