アフィリエイト広告を利用しています

広告

posted by fanblog
<< 光と色の三原色 | TOP

2018年08月19日

display:flex;

　s側の線・・・開始線／start　　　e側の線・・・終了線／end 


rowrow-reversecolumncolumn-reverse


nowrapｓ　主軸→
　┏━━━
交┃①②③┃
差　━━━┛
軸　　　　　ｅ
↓　　←主軸　ｓ
　　━━━┓
　┃③②①┃交
　┗━━━　差
ｅ　　　　　軸
　　　　　　↓ｓ　交差軸→
　┏━
主┃①┃
軸┃②┃
↓┃③┃
　　━┛
　　　　ｅ　　　　ｅ
　　━┓
↑┃③┃
主┃②┃
軸┃①┃
　┗━
ｓ　交差軸→


wrapｓ　主軸→
　┏━━━
交┃①②③┃
差┃④⑤⑥┃
軸┃⑦⑧⑨┃
↓　━━━┛
　　　　　　ｅ　　←主軸　ｓ
　　━━━┓
　┃③②①┃交
　┃⑥⑤④┃差
　┃⑨⑧⑦┃軸
　┗━━━　↓
ｅｓ　交差軸→
　┏━━━
主┃①④⑦┃
軸┃②⑤⑧┃
↓┃③⑥⑨┃
　　━━━┛
　　　　　　ｅ　　　　　　ｅ
　　━━━┓
↑┃③⑥⑨┃
主┃②⑤⑧┃
軸┃①④⑦┃
　┗━━━
ｓ　交差軸→


wrap-reverse　　　　　　ｅ
↑　━━━┓
交┃⑦⑧⑨┃
差┃④⑤⑥┃
軸┃①②③┃
　┗━━━
ｓ　主軸→ｅ
　┏━━━　↑
　┃⑨⑧⑦┃交
　┃⑥⑤④┃差
　┃③②①┃軸
　　━━━┛
　　←主軸　ｓ　←交差軸　ｓ
　　━━━┓
　┃⑦④①┃主
　┃⑧⑤②┃軸
　┃⑨⑥③┃↓
　┗━━━
ｅｅ
　┏━━━
　┃⑨⑥③┃↑
　┃⑧⑤②┃主
　┃⑦④①┃軸
　　━━━┛
　←交差軸　ｓ


【flexコンテナ】display:flex;を指定した要素
【flexアイテム】flexコンテナの子要素
【主軸】flexアイテムの配置方向
【交差軸】flexアイテムの改行方向
【構造】flexコンテナの中に行があり、行の中にflexアイテムがある
【行】主軸方向に伸びるスペース。flex-wrap:wrap;とalign-items:stretch;である程度可視化できる


◆flexコンテナへの指定　並び順は改行なし4種類、改行あり8種類
flex-direction　flexアイテムの配置方向

flex-wrap　縦並びの改行はflexコンテナへのheightの指定が必須


◆flexコンテナへの指定　並び方
align-content　行の配置（交差軸方向）

justify-content　行の中のflexアイテムの配置（主軸方向）

align-items　行の中のflexアイテムの配置（交差軸方向）の一括指定



















flex-item1
flex-item2
flex-item2
flex-item3
flex-item3
flex-item3
flex-item4
flex-item4
flex-item4
flex-item4
flex-item5
flex-item5
flex-item5
flex-item5
flex-item5
flex-item6
flex-item6
flex-item6
flex-item6
flex-item6
flex-item6
flex-item7
flex-item8
flex-item9
flex-item10
flex-item11
flex-item12
flex-item13
posted by templayer at 14:36 | Comment(0) | TrackBack(0) | css
この記事へのコメント
コメントを書く

お名前:

メールアドレス:


ホームページアドレス:

コメント: 必須項目

認証コード: 必須項目

※画像の中の文字を半角で入力してください。

この記事へのトラックバックURL
https://fanblogs.jp/tb/8007718

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
CSSシミュレータ(filter)

指名手配
リメイクまとめ一覧
まとめ01
まとめ02
まとめ03
まとめ04
まとめ05
まとめ06
まとめ07
まとめ08
まとめ09
まとめ10
まとめ11
まとめ12
まとめ13
まとめ14
まとめ15
日本旅行
国内旅行・国内ツアー
JR＋宿泊セットプラン
国内ホテル・旅館宿泊予約
高速・夜行・深夜バス
レンタカー
観光クーポン
海外ツアー・海外旅行
海外航空券＋ホテル
海外航空券・格安航空券
海外ホテル・格安ホテル
楽天トラベル
国内旅行
国内ツアー
国内航空券
レンタカー
高速バス
海外旅行
海外ツアー
海外航空券
海外レンタカー・鉄道
海外ホテル
トラベルサポート
割引クーポン
懸賞広場
観光案内
ランキング
最新コメント
最新トラックバック
カテゴリー
おーぷん２ちゃんねる(15)
テンプレート(9)
html & css(7)
html(1)
css(28)
月別アーカイブ
2018年08月(12)
2018年07月(26)
2018年06月(22)
忍者AdMax
忍者AdMax
忍者AdMax
QRコード
RSS
RSS 1.0
RSS 2.0
CSSシミュレータ

テンプレート一覧
GIFアニメスレ
定式幕
3div 2column
ブラックボーダー
迷彩柄
リメイクスレ01
リメイクスレ02
ワンカラム（上下）
ワンカラム（下下）
html & css
見える化テンプレート
・アメーバブログ
・FC2ブログ
・ファンブログ（旧）
・ファンブログ（新）
id一覧
class一覧
html
ファビコン
css　プロパティ
border
border-radius
①円弧
②楕円弧
box-sizing
filter
margin
max-width
padding
paddingとmargin
css　値
display:flex;
filter:
　blur();
　brightness();
　contrast();
　grayscale();
　hue-rotate();
　invert();
　opacity();
　saturate();
　sepia();
linear-gradient()
①位置指定なし
②位置指定あり
③方向指定
repeating-linear-gradient()
その他
アコーディオン
開閉パネル　簡易版
開閉パネル　詳細版
開閉パネル　改良版

絞り込み指定
光と色の三原色

旭日旗
Z旗
日章旗　日の丸

画像素材
リンク
お絵描きVIP
Can I use...
HTMLクイックリファレンス
Pure CSS speech bubbles
The Shapes of CSS
検索
ランキング投票
ブログランキング・にほんブログ村へ
ブログランキング・にほんブログ村へ
楽天市場
防災セット
応急手当用品
消火器
防災頭巾

非常食
保存水

簡易トイレ
簡易毛布・寝袋
防災ラジオ
×

この広告は30日以上新しい記事の更新がないブログに表示されております。