柔軟なポーチflexbilボックスやフレキシボックス、
レイアウトパターンCSS3、ページは画面サイズへの道は、弾性容器フレックスコンテナによって元のレイアウト要素を維持することを確実にする装置を適合させることができる、弾性フレックスアイテムサブ要素組成物は、表示を実現するために設けられています。
x軸は左から右に主軸を表し、Y軸は、上から下へ、スピンドルは、必ずしも水平でない、シャフトの側面を表す、によって正当化コンテンツ、メインスタートの開始から終了まで伸縮容器に伸縮軸を配置アイテム主要エンドは、幅及びスピンドルに対するスピンドルの高さの方向に突出延伸メインサイズのスピンドルサイズは、スピンドルのサイズです。
主軸側シャフト主軸クロス軸
表示：フレックス|インラインフレックス
フレックス方向：行|行逆|カラム|カラムリバース;主轴
フレックスラップ：ラップ| NOWRAP |ラップ逆に、伸縮自在に収縮したラップかによってサブ要素を配置し
正当化コンテンツを：スタートを曲げ|スペースアラウンド|フレックス・エンド|センター|スペースの間
合わせるアイテム：フレックススタートを|フレックス・エンド|センター|ベースライン|ストレッチ
ALIGN-コンテンツを：フレックススタート|フレックス・エンド|センター|スペースの間に|スペースアラウンド|ストレッチ
ディスプレイ、フレックス方向、フレックスラップ、正当化、コンテンツの結果
* {マージン：0;パディング：0;フォントサイズ：18px}
H1 {マージン：20ピクセル0 0;フォント重量：100;クリア：両方;フォントサイズ：24ピクセル}
スパン{フロート：左;パディング：0 10pxの;幅：250ピクセル}
入力{表示：ブロック}
セクション{高さ：は50px;幅：は50px;ボーダー：1ピクセル固体＃333;行の高さ：は50px;テキスト整列：センター}
#display {ボーダー：1ピクセル固体＃222 ;ディスプレイ：曲がる;パディング：;} 5pxの
＃はフレックス方向{ボーダー：固体＃222を1ピクセル;パディング：5pxの;表示：曲がる、曲がる方向：行}
＃フレックスラップ{ボーダー：1ピクセル固体＃222;パディング： 5pxの;表示：屈曲、ラップ曲がる：NOWRAP}
＃正当化コンテンツを{高さ：100pxに;;境界：1ピクセル固体＃222;パディング：5pxの;表示：曲がる;正当化コンテンツを：屈曲開始}
<H1>表示</ H1>
<スパン>
フレックスの<input type = "ラジオ" NAME = "表示" />
インラインフレックスの<input type = "ラジオ" NAME = "表示" />
</スパン>
の<divのid = "表示">
<セクション> 1 </部>
<セクション> 2 </セクション>
<セクション> 3 </セクション>
<セクション> 4 </セクション>
</ div>
<H1>フレックス方向</ H1 >
<span>の
行の<input type = "ラジオ" NAME = "フレックス方向" />
行逆の<input type = "ラジオ" NAME = "フレックス方向" />
列の<input type = "ラジオ"NAME = "フレックス方向" />
列逆の<input type = "ラジオ" NAME = "フレックス方向" />
</ span>の
<DIV ID = "フレックス方向">
<セクション> 1 </部>
<セクション> 2 </セクション>
<セクション> 3 </セクション>
<セクション> 4 </セクション>
</ div>
<H1>フレックスラップ（设置伸缩子元素在缩小窗口时是否换行）</ H1>
<スパン>
NOWRAPの<input type = "ラジオ" NAME = "フレックスラップ" />
の<input type = "ラジオ" NAME = "フレックスラップ" />ラップ
ラップ逆の<input type = "ラジオ"名前=」フレックスラップ"/>
</ span>を
<DIV ID ="フレックスラップ">
<セクション> 1 </部>
<セクション> 2 </セクション>
<セクション> 3 </セクション>
<セクション> 4 </セクション>
<セクション> 5 </ section>の
<セクション> 6 </セクション>
<セクション> 7 </セクション>
<セクション> 8 </セクション>
</ div>
<H1>正当化コンテンツ</ H1>
<スパン>
フレックススタートの<input type = "ラジオ" NAME = "コンテンツを正当化" />
フレックス端の<input type = "ラジオ" NAME = "正当化コンテンツ" />
中央の<input type = "ラジオ" NAME = "正当化コンテンツを" />
空間との間の<input type = "ラジオ"名前= "正当化コンテンツを" />
空間の周りの<input type = "ラジオ" NAME = "正当化コンテンツを" />
</ span>を
<DIV ID = "正当化コンテンツを">
<セクション> 1 </部>
<セクション> 2 </セクション>
<セクション> 3 </セクション>
<セクション> 4 </セクション>
</ div>
JSの一部
VAR btnFlex = document.getElementsByTagName（ "入力"）;
VAR oDiv = document.getElementsByTagName（ "DIV"）;
/ *ディスプレイ* /
btnFlex [0] .onclick =関数（）{
IF（this.checked）{
oDiv [0] .style.display = "フレックス"。}}
btnFlex [1] .onclick =関数（）{
IF（this.checked）{
oDiv [0] .style.display = "インラインフレックス";}}
/ *フレックス方向* /
btnFlex [2] .onclick =関数（）{
IF（this.checked）{
oDiv [1] .style.cssText = "フレックス方向：列";}}
btnFlex [3] .onclick =関数（）{
IF（this.checked）{
oDiv [1] .style.cssTextは= "フレックス方向：行反転";}}
btnFlex [4]。
（btnFlex [4] .checkedを）場合{
oDiv [1] .style.cssText = "フレックス方向：カラム";}}
btnFlex [5] .onclick =関数（）{
IF（this.checked）{
oDiv [1 ] .style.cssText = "フレックス方向：カラム逆";}}
/ *フレックスラップ* /
btnFlex [6] .onclick =関数（）{
IF（this.checked）{
oDiv [2] .style。 cssText = "フレックスラップ：NOWRAP";}}
btnFlex [7] .onclick =関数（）{
{（this.checked）場合
oDiv [2] .style.cssText = "フレックスラップ：ラップ";}}
btnFlex [8] .onclick =関数（）{
IF（this.checked）{
oDiv [2] .style.cssText = "フレックスラップ：逆ラップ";}}
/ *正当化コンテンツ* /
btnFlex [9]。onclickの=関数（）{
（この場合。 {）をチェック
oDiv [3] .style.cssText = "正当化コンテンツを：開始を曲げる";}}
{[10] .onclick =関数（）btnFlexを
（this.checked）場合{
oDiv [3] .style.cssText =「正当化-content：端を曲げる";}}
btnFlex [11] .onclick =関数（）{
IF（this.checked）{
oDiv [3] .style.cssText = "正当化コンテンツを;}}中心"
12 [btnFlex ] .onclick =関数（）{
IF（this.checked）{
oDiv [3] .style.cssText = "正当化コンテンツを：スペースとの間の";}}
btnFlex [13] .onclick =関数（）{
（この場合.checkedを）{
oDiv [3] .style.cssText = "正当化コンテンツを：スペースアラウンド";}}
ALIGN-アイテム効果
.flexスタート{高さ：100pxに、ディスプレイ：フレックス;ボーダー：1ピクセル固体＃333;パディング：5pxの; ALIGN-アイテム：屈曲開始}
.flexエンド{高さ：100pxに、ディスプレイ：曲がる;ボーダー：1ピクセル固体＃ 333;パディング：5pxの; ALIGN-アイテム：屈曲端}
.center {高さ：100pxに、ディスプレイ：曲がる;パディング：5pxの;ボーダー：1ピクセル固体＃333; ALIGN-アイテム：中心}
.baseline {高さ：100pxに、パディング：5pxの;表示：曲がる;ボーダー：1ピクセル固体＃333; ALIGN-アイテム：ベースライン}
.stretch {高さ：100pxに、パディング：5pxの;表示：曲がる;ボーダー：1ピクセル固体＃333; ALIGN-アイテム：ストレッチ}
#align P {幅は50px;境界を：1ピクセル固体＃333} -items
<H1> ALIGN-アイテム侧轴</ H1>
<スパン>
ストレッチの<input type = "ラジオ"名前= / "アイテム整列">
フレックススタートの<input type = "ラジオ"の名前は= "ALIGN-項目" / >
フレックス端の<input type = "ラジオ" NAME = "-アイテムを揃える" />
中央の<input type = "ラジオ"名= /> "アイテム整列"
ベースラインの<input type = "ラジオ"名前=」・アイテムを揃える"/>
</ span>を
<DIV ID ="「クラス= "ストレッチ">・アイテム整列
<Pスタイル= "フォントサイズ：12ピクセルを"> 1 </ P>
<P> 2 </ P>
<Pスタイル= "フォントサイズ：28px"> 3 </ P>
<Pスタイル= "フォントサイズ：40ピクセル"> 4 </ P>
</ div>
ALIGN-コンテンツ結果
.cflexスタート{高さ：300ピクセル;ディスプレイ：曲がる;ボーダー：1ピクセル固体＃333;パディング：5pxの; ALIGN-コンテンツ：屈曲スタート;曲がるラップ：ラップ}
.cflexエンド{高さ：300ピクセル;ディスプレイ：フレックス;ボーダー：1ピクセル固体＃333;パディング：5pxの;・コンテンツを整列：屈曲端と、屈曲ラップを：ラップ}
.ccenter {高さ：300ピクセル;ディスプレイ：フレックス;ボーダー：1ピクセル固体＃333;パディング：5pxの; ALIGN-コンテンツ：センター;ラップ曲がる：ラップ}
;ディスプレイ300ピクセル：曲がる;ボーダー：1ピクセル固体＃333;パディング：.cspace-間{高5pxのは、ALIGN-含量：空間との間に、屈曲ラップ：ラップ}
.cspace -around {高さ：300ピクセル;ディスプレイ：曲がる;ボーダー：1ピクセル固体＃333;パディング：5pxの; ALIGN-コンテンツを：スペースの周りに、屈曲ラップ：ラップ}
.cstretch {高さ：300ピクセルと、ディスプレイは：曲がる;ボーダー：1ピクセル固体＃333;パディング：5pxの; ALIGN-内容：ストレッチ;曲がるラップ：ラップ}
<H1> ALIGN-コンテンツを（设置伸缩子元素在缩小窗口时是否换行）</ H1>
<スパン>
ストレッチの<input type = "ラジオ" NAME = "ALIGN-内容を" />
フレックススタートの<input type =」無線」NAME = "ALIGN-内容を" />
フレックス端の<input type = "ラジオ" NAME = "ALIGN-内容を" />
中央の<input type = "ラジオ" NAME = "ALIGN-内容を" />
空間との間の<INPUT TYPE = "ラジオ" NAME = "ALIGN-コンテンツ" />
空間の周りに<INPUT TYPE = "ラジオ" NAME = "ALIGN-内容を" />
</ span>を
<DIV ID = "ALIGN-コンテンツ"クラス= "cstretch">
<セクション> 1 </ section>の
<セクション> 2 </セクション>
<セクション> 3 </セクション>
<セクション> 4 </セクション>
<セクション> 5 </セクション>
<セクション> 6 </セクション>
<セクション> 7 </セクション>
<セクション> 8 </ section>の
</ div>
btnFlex [19] .onclick =関数（）{
IF（this.checked）{
oDiv [5] .setAttribute（ "クラス"、 "cstretch"）;}}
btnFlex [20] .onclick =関数（）{
（この場合.checkedを）{
oDiv [5] .setAttribute（ "クラス"、 "cflexスタート"）;}}
btnFlex [21] .onclick =関数（）{
IF（this.checked）{
oDiv [5] .setAttribute（」クラス」、 "cflexエンド"）;}}
btnFlex [22] .onclick =関数（）{
IF（this.checked）{
oDiv [5] .setAttribute（ "クラス"、 "ccenter"）;}}
btnFlex [ 23] .onclick =関数（）{
IF（this.checked）{
oDiv [5] .setAttribute（ "クラス"、 "関連するcspace-間"）;}}
btnFlex [24]。onclickの=関数（）{
{（this.checked）場合
oDiv [5] .setAttribute（ "クラス"、 "関連するcspaceアラウンド"）;}}
子要素のプロパティで書かれました
フレックス：なし|フレックス成長|フレックスシュリンク|フレックス基礎;默认0 1オート
複合プロパティ、フレックス場合：フレックス計算値[場合、1：1 1 0;オート1つのオートあり、いずれも0 0自動車ではありません
フレックス成長：;フレックス成長：<数>（デフォルト0）は負の値、0はスペースのデフォルトを割り当てられていないことはできません、調剤
弾性要素ボックスの残りのスペースに応じて柔軟ポーチのスケーリングまたは割り当てられた拡散係数の比として取得
フレックス収縮;曲がる収縮：<番号>（デフォルト1）。
過剰スペース割り当て
フレックス基準：基準値設定またはカートリッジの弾性伸びを検索、
オート：いいえ、特定の幅、他の特性に応じて
<長さ>幅を規定する長さの値は負にすることはできません
<パーセンテージ>：パーセント否定することはできません
または：<整数>
サブ要素の出現順序設定、整数整数値を負とすることができる、小さな値の前列、デフォルト0
自己を揃える：オート|フレックススタート|フレックス・エンド|センター|ベースライン|ストレッチ
弾性要素は、シャフトの側の配向方向に配置されています
オート：ストレッチ、親要素の値にALIGN-アイテムを依存し、そうでない場合
フレックス成長
残りのスペースよりも分布が12、210-50-100 = 60、60 /（1 + 2）とを等分します
■は{幅：210px;高さ：30px ;;境界：1ピクセル固体＃333;表示：フレックス}
.box1 {幅は50px;背景：＃1 F00;曲がる-成長：1}
.box2 {幅：100pxに、背景： ＃0F0;フレックス成長：2}
<DIV CLASS = "ボックス">
<DIV CLASS = "BOX1">過ち</ div> <divのクラス= "BOX2"> 送信豆腐</ div>
</ div>
フレックスshirink
過剰スペース150 + 100〜220 = 30px、総重量150 * 100 * 2 + 1 = 350
Box4空間スケールは= 18.75 = 150 * 1/320 * 40が除去され、150から18.75まで
box5 = 100 * 320分の2 * 40 = 21.25; 100から21.25まで
.box3 {幅：220px;高さ：30px;ボーダー：1ピクセル固体＃333;表示：フレックス}
.box4 {幅150ピクセル、背景：＃1 F00、屈曲収縮：1}
.box5 {幅：100pxに、背景：＃ 0F0;屈曲収縮：2}
<DIV CLASS = "BOX3">
<DIV CLASS = "box4">過ち</ div> <divのクラス= "box5"> 送信豆腐</ div>
</ div>
フレックス基礎：フレックスシュリンク1に、フレックス基礎を設定した後、デフォルトの自動：6：1流通スペース
.ul2 {幅：600PX;高さ：200pxの、背景：＃999;表示：屈曲、リストスタイル：なし;}
.ul2李{高さ：100pxに;幅：100pxに、背景：＃444}
.ul2李：nth-型（2）{フレックス基準：600PX;背景：＃555}
<H1>フレックス基礎</ H1>
<ULクラス= "UL2">
<LI> </ LI>
<LI> B </ LI>
<LI> C </ LI>
</ UL>
オーデル属性、席の子要素の行
.ul1 {高さ：100pxに、幅：600PX;背景：＃999;表示：屈曲、リストスタイル：なし;}
.ul1李{幅：100pxに、マージン右：20ピクセル、背景：＃333}
.ul1李： n番目の子（3）,. UL1リチウム：n番目の子（5）{順序：1;}
<ULクラス= "UL1"> <LI> 1 </ LI> <LI> 2 </ LI> <LI> 3 </ LI> <LI> 4 </ LI> <LI> 5 </ LI> </ UL>
側軸方向開始位置ALIGN自己の属性、サブエレメント
.ul3 {高さ：100pxに、幅800ピクセル、パディング：20ピクセル。背景：＃999;表示：屈曲、リストスタイル：なし;}
.ul3李{幅：100pxに、マージン右：20ピクセル、背景：＃333}
.ul3のリチウム：n番目の子（1）{ALIGN-自己。自動;}
.ul3のリチウム：n番目の子（2）{ALIGN-自己：屈曲スタート;}
.ul3のリチウム：n番目の子（3）{ALIGN-自己：屈曲端;}
.ul3のリチウム：n番目の子（4）{ALIGN-自己：センター;}
.ul3のリチウム：n番目の子（5）{ALIGN-自己：ベースライン;パディング：20ピクセル}
.ul3のリチウム：n番目の子（6）{ALIGN-自己：ベースライン;}
.ul3のリチウム：n番目の子（7）{整列自己：ストレッチ;}
報道関係お問い合わせ先
メディアタイプ及びメディア条件式のうちの1つまたは複数の特性によって検出された、CSSに設定されている：表示装置（縦または横例えば、ビューポートの幅、画面比率、デバイスの向きが）の特性
あなたは、特定のデバイスのためのスタイルを提供するために、メディアコンテンツを変更せずに、検出するための幅、高さ、色やメディアの他の特性を持つことができます
文法
@media MEDIATYPEと|しない|だけ（メディア機能）{}。
構文2
<リンクのrel = "スタイルシート" メディア= "MEDIATYPEと|ない|のみ（メディア機能）のhref ="」/>
メディアクエリ構文は、デバイスをサポートしています
- ： -
すべて：すべての機器。
聴覚：音声とオーディオの発電のための
点字：触覚フィードバックデバイス
エンボス加工：デバイスが、バンプに適している（点字）印刷装置
小型携帯機器用またはハンドヘルド
印刷：プリンタ
投影：投影画像：スライド
画面：コンピュータモニタ、一般的に
TTY：そのようなテレタイプ端子としてグリッド固定ピッチ文字、及び
テレビ：TV
メディアクエリ構文のプロパティ
図を参照してください。
モバイル端末レイアウト：ユニットPXのEM
1：割合（弾性）のレイアウト
高さと上部と下部位置変わらず、エントリの真ん中の左右には、解像度を変更しません。
2：REM幾何学的なスケーリングレイアウト
部分的な解像度のズーム
PXの問題、より正確な、ユーザーのブラウズズームフォントサイズを変更する場合、ページレイアウトが壊れただろう、そしてあなたは、EMを使用することができます（親要素に対して）要素のフォントサイズ
REM（ウェブアプリを使用）
ルート要素のフォントサイズ、単位のルート要素に対するフォントサイズ。これは相対的単位であります
利点：すべての画面の同じ割合。REMは、ルート要素、REMの大きさを制御することができ、フォントサイズを設定することにより、htmlページのルート要素によって構成されています。
報道関係お問い合わせ先
スクリーンと@media（最小幅：1000px）{
本体{背景：＃0F0;}
}
@media画面と（最小幅：800ピクセル）と（最大幅：1000px）{
本体{背景：＃1 F00;}
}
@media画面（最大幅：800ピクセル）{
本体{背景：＃00F;}
}
/ * REM（APPウェブを使用して）すべてのユニットのルート要素と一致するようにフォントサイズと* /一体として
@media画面と（幅分：1000px）{
HTML {フォントサイズ：48px;}
}
@media画面と（最大幅：800ピクセル）と（最小幅：1000px）{
HTML {フォントサイズ：36px;}
}
@media画面及び（最小幅：800ピクセル）{
HTML {フォントサイズは24px;}
}
.input2 {幅：3rem;高さ：2rem;背景：＃1 0FF;ボーダー：なし;色：#FFF;フォントサイズ：1rem}
<H1> REM（Webアプリケーション使用）</ H1>
<入力クラス= "INPUT2"値= "确定"タイプ= "送信">
練習
.div {ディスプレイ：曲がる、曲がるラップ：NOWRAP;背景：＃999;パディング：10pxの;幅：600PX}
.div DIV {遷移：全て0.5秒;高さ：100pxに;幅：200pxの、境界固体1ピクセル＃111 ;}
.div DIV：n番目の子は、（1）{背景：URL（」../ IMG / 1.JPG "）}
.div DIV：n番目の子（2）{背景：URL（" ../ IMG / 2.JPG "）}
.div DIV：n番目の子（3）{背景：URL（" ../ IMG / 3.JPG "）}
.div DIV：n番目の子（4）{背景：URL（"。 ./img/4.jpg "）}
.div DIV：n番目の子（5）{背景：URL（" ../ IMG / 3.JPG "）}
.div DIV：ホバー{幅：400ピクセル}
<H1>练习</ H1>
<DIV CLASS = "DIV">
の<div> </ div>
<div> </ div>
<div> </ div>
<div> </ div>
<div> </ DIV >
</ div>