Flexboxを理解しましょう！

説明

Flexboxとは

参考サイト

基本的な構成

HTML（親子関係が出来ればulなどの他のタグでも可）


    <p>&nbsp;Flexコンテナー（親要素）</p>
    <div class="container">
        <div class="item">Flexアイテム-1（子要素-1）</div>
        <div class="item">Flexアイテム-2（子要素-2）</div>
        <div class="item">Flexアイテム-3（子要素-3）</div>
    </div>

CSS


    .container {
        display: flex;
        padding: 20px;
        border: 1px #333 solid;
    }

    .item {
        padding: 20px;
        border: 1px #333 solid;
    }

表示結果

 Flexコンテナー（親要素）

Flexアイテム-1（子要素-1）
Flexアイテム-2（子要素-2）
Flexアイテム-3（子要素-3）

ポイント

Flexコンテナー（親要素）に指定可能なプロパティ

flex-direction
Flexアイテムの並び順を指定すします。
row（初期値）
Flexアイテムを水平方向に左から右へと配置します。
row-reverse
Flexアイテムを水平方向に右から左へと配置します。
column
Flexアイテムを垂直方向に上から下へと配置します。
colmn-reverse
Flexアイテムを垂直方向に下から上へと配置します。
flex-wrap
Flexアイテムの折り返しを指定します。
nowrap（初期値）
Flexアイテムを折り返さずに一列に配置します。
wrap
複数行のFlexアイテムを上から下へと配置します。
wrap-reverse
複数行のFlexアイテムを下から上へと配置します。
flex-flow
flex-directionとflex-wrapを一括で指定します。
flex-flow: （flex-directionの値） （flex-wrapの値）;
 
justify-content
Flexアイテムの水平方向の位置を指定します。
flex-start（初期値）
Flexアイテムを左揃えで配置します。
flex-end
Flexアイテムを右揃えで配置します。
center
Flexアイテムを左右中央揃えで配置します。
space-between
両端のFlexアイテムを余白を空けずに配置し他の要素は均等に間隔を空けて配置します。
space-around
両端のFlexアイテムも含めて均等な間隔を空けて配置します。
align-items
Flexアイテムの垂直方向の位置を指定します。
stretch（初期値）
Flexアイテムを上下の余白を埋めるように配置します。
flex-start
Flexアイテムを上揃えで配置します。
flex-end
Flexアイテムを下揃えで配置します。
center
Flexアイテムを上下中央揃えで配置します。
baseline
Flexアイテムをベースラインに合わせて配置します。
align-content
Flexアイテムの行の垂直方向の位置を指定します。
stretch（初期値）
Flexアイテムの行を余白を埋めるように配置します。
flex-start
Flexアイテムの行を上揃えで配置します。
flex-end
Flexアイテムの行を下揃えで配置します。
center
Flexアイテムの行を上下中央揃えで配置します。
pace-between
最上行と最下行のFlexアイテムを余白を空けずに配置し他のアイテム行は均等に間隔を空けて配置します。
space-around
すべてのFlexアイテム行が均等に間隔を空けて配置します。

Flexアイテム（子要素）に指定可能なプロパティ

order
Flexアイテムの並び順を指定します。
（数値）
Flexアイテム（子要素）の順番をマイナスを含む数値で指定します。（初期値は0）
flex-grow
Flexアイテムの伸び率を指定します。
（数値）
Flexコンテナー（親要素）に横方向の余白がある時にFlexアイテム（子要素）を伸ばす比率を数値で指定します。（初期値は0でマイナス値は無効）
flex-shrink
Flexアイテムの縮み率を指定します。
（数値）
Flexアイテム（子要素）の横方向の合計がFlexコンテナー（親要素）に入りきらない時にFlexアイテム（子要素）をし縮める比率を数値で指定します。（初期値は1でマイナス値は無効）
flex-basis
Flexアイテムのベースの幅を指定します。
（百分率）
Flexアイテム（子要素）の幅を百分率（%）で指定します。（初期値はauto）
flex
orderとflex-growとflex-shrinkを一括で指定します。
flex: （orderの値） （flex-growの値） （flex-shrinkの値）;  
align-self
Flexアイテムの垂直方向の位置を指定します。Flexコンテナー（親要素）に余白がなければ、どれを指定しても表示は変わりません。Flexコンテナー（親要素）にalign-itemsを指定することで垂直方向の位置を指定することもできますがFlexアイテムにalign-selfが指定されているとこちらが優先されます。
auto（初期値）
Flexコンテナー（親要素）のalign-itemsの値を使用します。
stretch
Flexアイテムを上下の余白を埋めるように配置します。
flex-start
Flexアイテムを上揃えで配置します。
flex-end
Flexアイテムを下揃えで配置します。
center
Flexアイテムを中央揃えで配置します。
baseline
Flexアイテムをベースラインに合わせて配置します。

注意事項

display: flex; と display: inline-flex;

display: flex;

子要素-1-1
子要素-1-2
子要素-1-3
子要素-2-1
子要素-2-2
子要素-2-3

display: inline-flex;

子要素-1-1
子要素-1-2
子要素-1-3
子要素-2-1
子要素-2-2
子要素-2-3

Flexコンテナー（親要素）に指定可能なプロパティ

flex-direction

Flexアイテムの並び順を指定すします。

row（初期値）
Flexアイテムを水平方向に左から右へと配置します。
row-reverse
Flexアイテムを水平方向に右から左へと配置します。
column
Flexアイテムを垂直方向に上から下へと配置します。
colmn-reverse
Flexアイテムを垂直方向に下から上へと配置します。

flex-direction: row;（初期値）

子要素-1
子要素-2
子要素-3

flex-direction: row-reverse;

子要素-1
子要素-2
子要素-3

flex-direction: column;

子要素-1
子要素-2
子要素-3

flex-direction: column-reverse;

子要素-1
子要素-2
子要素-3

flex-wrap

Flexアイテムの折り返しを指定します。

nowrap（初期値）
Flexアイテムを折り返さずに一列に配置します。
wrap
複数行のFlexアイテムを上から下へと配置します。
wrap-reverse
複数行のFlexアイテムを下から上へと配置します。

flex-wrap: nowrap;（初期値）

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12

flex-wrap: wrap;

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12

flex-wrap: wrap-reverse;

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9
子要素-10
子要素-11
子要素-12

flex-flow

flex-directionとflex-wrapを一括で指定します。

flex-flow: （flex-directionの値） （flex-wrapの値）;

justify-content

Flexアイテムの水平方向の位置を指定します。

flex-start（初期値）
Flexアイテムを左揃えで配置します。
flex-end
Flexアイテムを右揃えで配置します。
center
Flexアイテムを左右中央揃えで配置します。
space-between
両端のFlexアイテムを余白を空けずに配置し他の要素は均等に間隔を空けて配置します。
space-around
両端のFlexアイテムも含めて均等な間隔を空けて配置します。

justify-content: flex-start;（初期値）

子要素-1
子要素-2
子要素-3
子要素-4

justify-content: flex-end;

子要素-1
子要素-2
子要素-3
子要素-4

justify-content: center;

子要素-1
子要素-2
子要素-3
子要素-4

justify-content: space-between;

子要素-1
子要素-2
子要素-3
子要素-4

justify-content: space-around;

子要素-1
子要素-2
子要素-3
子要素-4

align-items

Flexアイテムの垂直方向の位置を指定します。

stretch（初期値）
Flexアイテムを上下の余白を埋めるように配置します。
flex-start
Flexアイテムを上揃えで配置します。
flex-end
Flexアイテムを下揃えで配置します。
center
Flexアイテムを上下中央揃えで配置します。
baseline
Flexアイテムをベースラインに合わせて配置します。

align-items: stretch;（初期値）

子要素-1
子要素-2
子要素-3

align-items: flex-start;

子要素-1
子要素-2
子要素-3

align-items: flex-end;

子要素-1
子要素-2
子要素-3

align-items: center;

子要素-1
子要素-2
子要素-3

align-items: baseline;

子要素-1
子要素-2
子要素-3

align-content

Flexアイテムの行の垂直方向の位置を指定します。

stretch（初期値）
Flexアイテムの行を余白を埋めるように配置します。
flex-start
Flexアイテムの行を上揃えで配置します。
flex-end
Flexアイテムの行を下揃えで配置します。
center
Flexアイテムの行を上下中央揃えで配置します。
space-between
最上行と最下行のFlexアイテムを余白を空けずに配置し他のアイテム行は均等に間隔を空けて配置します。
space-around
すべてのFlexアイテム行が均等に間隔を空けて配置します。

align-content: stretch;（初期値）

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

align-content: flex-start;

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

align-content: flex-end;

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

align-content: center;

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

align-content: space-between;

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

align-content: space-around;

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7
子要素-8
子要素-9

Flexアイテム（子要素）に指定可能なプロパティ

order

Flexアイテムの並び順を指定します。

（数値）
Flexアイテム（子要素）の順番をマイナスを含む数値で指定します。（初期値は0）

order: （数値）;

子要素-1：order: 4;

子要素-2：order: 2;

子要素-3：order: 1;

子要素-4：order: 3;

子要素-1
子要素-2
子要素-3
子要素-4

flex-grow

Flexアイテムの伸び率を指定します。

（数値）
Flexコンテナー（親要素）に横方向の余白がある時にFlexアイテム（子要素）を伸ばす比率を数値で指定します。（初期値は0でマイナス値は無効）

flex-grow: （数値）;

flex-grow指定なし

子要素-1
子要素-2
子要素-3
子要素-4

子要素-1：flex-grow: 4;

子要素-2：flex-grow: 2;

子要素-3：flex-grow: 1;

子要素-4：flex-grow: 2;

子要素-1
子要素-2
子要素-3
子要素-4

flex-shrink

Flexアイテムの縮み率を指定します。

（数値）
Flexアイテム（子要素）の横方向の合計がFlexコンテナー（親要素）に入りきらない時にFlexアイテム（子要素）を縮める比率を数値で指定します。（初期値は1でマイナス値は無効）

flex-shrink: （数値）;

子要素にwidth: 40%;を指定（40% × 4子要素 ＝ 160%）

flex-shrink指定なし

子要素-1
子要素-2
子要素-3
子要素-4

子要素にwidth: 40%;を指定（40% × 4子要素 ＝ 160%）

子要素-1：flex-shrink: 4;

子要素-2：flex-shrink: 2;

子要素-3：flex-shrink: 1;

子要素-4：flex-shrink: 2;

子要素-1
子要素-2
子要素-3
子要素-4

flex-basis

Flexアイテムのベースの幅を指定します。

（百分率）
Flexアイテム（子要素）の幅を百分率（%）で指定します。（初期値はauto）

flex-basis: （百分率）;

子要素-1：flex-basis: 50%;

子要素-2：flex-basis: 20%;

子要素-3：flex-basis: 15%;

子要素-4：flex-basis: 15%;

子要素-1
子要素-2
子要素-3
子要素-4

flex

orderとflex-growとflex-shrinkを一括で指定します。

flex: （orderの値） （flex-growの値） （flex-shrinkの値）;

align-self

Flexアイテムの垂直方向の位置を指定します。Flexコンテナー（親要素）に余白がなければ、どれを指定しても表示は変わりません。Flexコンテナー（親要素）にalign-itemsを指定することで垂直方向の位置を指定することもできますがFlexアイテムにalign-selfが指定されているとこちらが優先されます。

auto（初期値）
Flexコンテナー（親要素）のalign-itemsの値を使用します。
stretch
Flexアイテムを上下の余白を埋めるように配置します。
flex-start
Flexアイテムを上揃えで配置します。
flex-end
Flexアイテムを下揃えで配置します。
center
Flexアイテムを中央揃えで配置します。
baseline
Flexアイテムをベースラインに合わせて配置します。

align-self: auto;、stretch;、flex-start;、flex-end;、center;、baseline;

子要素-1：align-self: auto;

子要素-2：align-self: stretch;

子要素-3：align-self: flex-start;

子要素-4：align-self: flex-end;

子要素-5：align-self: center;

子要素-6：align-self: baseline;

子要素-7：align-self: baseline;（font-size: 200%;）

子要素-1
子要素-2
子要素-3
子要素-4
子要素-5
子要素-6
子要素-7

サンプル：一般的なWebサイト

ワイヤーフレーム

ワイヤーフレーム

表示形式

  • トップ
  • 商品情報
  • 企業情報
  • お問合せ

商品情報

沖縄のシーサー飾り

シーサーの飾り物

沖縄のシーサーの飾り物です。シーサーは沖縄県などで伝説の獣像で魔除けの意味を持ち屋根の上に設置されることが多いとされています。今回の商品はシーサーをベースにした飾り物で部屋の中に飾ることで魔除けとしても使えるかもしれません。

アメリカのイオンディアン飾り

インディアンの飾り物

アメリカの先住民であるインディアンが作成した飾り物です。この飾り物はアメリカのグランドキャニオンを拠点とするインディアンが作成しました。作成したインディアンの話ではインディアンが信仰する大地の神が宿っているとのことです。

お知らせ

  • 5月：GWお休み情報
  • 4月：新型コロナ情報
  • 4月：花見情報
  • 1月：初売り情報

ニュース

  • ドイツの新型食器
  • ハワイ旅行とお土産
  • 鬼滅の刃の海外展開

Copyright(c) 2021 DEAU株式会社 All rights reserved.