モバイル フロントエンド プロジェクトを行うために Flex の学習を始めましょう~! Flex を使用すると、レイアウトについて心配する必要がなくなります。早速始めましょう！
CSS で flex を使用するための構文
display: flex;
display: color: #443e39; font-family: 'Hiragino Sans GB W3', 'Hiragino Sans GB', Arial, Helvetica, simsun, u5b8bu4f53;" / > ;display: -moc-flex;/* Firefox と互換性あり */
display: -o-flex;/* Opera と互換性あり */
flex-direction
(親コンテナ要素に適用可能)
flex-direction:row ;
a b c フレックス方向:行反転;
c b c フレックス- direct:column-reverse;
a b c flex-wrap
(親コンテナ要素に適用) フレックスボックスオブジェクトの子要素が親コンテナを超えたときにラップするかどうかを設定または取得します。 フレックスラップ:nowrap | ラップリバース
b
flex-wrap:wrap;
フレックス- w rap:wrap -reverse;
a
b c flex-flow (親コンテナ要素に適用可能)
方向とラップのコレクションに相当 flex-flow: row nowrap;ラップせずに順次 */
flex-flow:row-reverse Wrap; /* 逆順に配置し、自動的にラップします*/ justify-content (親コンテナー要素に適用されます)
のフレックス ボックス要素を設定または取得します主軸（水平軸） 方向の調整。
justifu-content: flex-start | flex-end | space-around justify-content:flex-start
b justify-content:flex-end; ; a
b
justify-content:center;
a
c
space-between: フレックスボックス要素は均等になります。で配布されていますこの線。左端の残りのスペースが負の場合、または行に子が 1 つだけある場合、この値は「flex-start」と同等です。他の場合には、最初の要素のマージンは行のメイン開始マージンと位置合わせされ、最後の要素のマージンは行のメイン終了マージンと位置合わせされ、残りのフレックス項目は均等に分散され、要素間に等しい空白があることを確認してください。二。
a
b
c
justify-content:space-around; space-around: フレックスボックス要素は行内に均等に配置され、サブ要素間のスペースの半分が両端に保持されます。左端の残りのスペースが負の場合、または行にフレックスボックス項目が 1 つだけある場合、この値は「center」と同等です。他の場合では、フレックス ボックス項目は均等に配置され、項目間の空白スペースは等しく、最初の要素の前と最後の要素の後のスペースの半分がそれらの間のスペースの半分になります。
a b
c align-items
(親コンテナ要素に適用) フレックスボックス要素の交差軸(縦軸)方向の配置を設定または取得します。
align-items:flex-start | ベースライン |
align-items:flex-start c
align-items:flex-end;
b c
align-items:center; a
b
c
align-items:baseline
baseline: フレキシブルボックス要素のインライン軸と横軸が同じ場合、この値は「flex-start」に相当します。それ以外の場合、この値はベースライン調整に参加します。 a
b
c
align-items:strrecth;
stretch: 軸の横のサイズを指定する属性値が 'auto' の場合、その値は項目のマージン ボックスのサイズを可能な限り近づけます。行サイズに制限されますが、「min/max-width/height」属性の制限にも準拠します。
a
b
c align-content (親コンテナ要素に適用されます)
フレックスボックススタッキングフレックス行の配置を設定または取得します。
整列コンテンツ: フレックス スタート | スペース間 | スペース ストレッチ
整列コンテンツ:
b
d
f
align-content:flex-end; a
b
c
d
e
f
align-content:center;
c
d e f
align-content:space-around;
a b c d e f
align-content:space-around;
a
b c d e f
align-content:strrecth;
a c d e f flex-grow
(子要素に適用) フレックスボックスの拡張率を設定または取得します。残りのスペースは、フレックスボックス要素によって設定された拡張係数に基づいた比率として割り当てられます。 flex-grow のデフォルト値は 0 です。この属性が明示的に定義されていない場合、残りのスペースを割り当てる権限がありません。この例では、b と c の両方が明示的に flex-grow を定義しており、残りのスペースが 4 つの部分に分割されており、そのうち b が 1 つの部分を占め、c が 3 つの部分を占めていることがわかります。つまり、1:3 flex-grow: （default 0）
abflex-grow：1
cflex-grow：2
d
e
flex-shrink
（子要素に適用）
縮小率 (フレックス ボックス要素によって比率として設定された縮小率に従ってスペースを縮小します。
flex-shrink: (デフォルト 1) flex-basis
(子要素に適用されます) フレックスを設定または取得しますボックス拡張基準値。すべての子要素の基準値の合計が残りのスペースより大きい場合、各項目に設定された基準値に従って残りのスペースが比例して拡張されます
flex-basis: (と表現できます)パーセンテージとして) | auto (デフォルトの自動) a b c
flex-basis:600px;
d
e
flex(複合プロパティ)
(子要素に適用)
flex: none | [ flex-grow ] || [ flex-shrink ] |
none: none キーワードの計算値: 0 0 auto
[ flex-grow ]: フレックスの拡張率を定義します。 box 要素 [flex-shrink ]: フレックス ボックス要素の縮小率を定義します
[flex-basis ]: フレックス ボックス要素のデフォルトの基準値を定義します
