モバイル Web ページのための CSS3 フレックス レイアウト学習ガイド

Flexbox を使用すると、通常、そのサブ要素レイアウトをより適切に操作できるようになります。これは、モバイル Web ページ用の CSS3 Flex レイアウト学習ガイドの概要です。必要な方は、それを参照してください。

1. Flexbox レイアウトの使用を開始する方法。コードは次のとおりです:

footer{   
display:flex;   
}

2. 次に、フッターに flex-flow 属性を追加します:

flex-flow:row wrap;

row は行単位で表示することを意味し、wrap は親がラップするかどうかを設定します。要素が小さすぎます。
flex-flow は flex-direction と flex-wrap の 2 つのプロパティと一緒に定義されることに注意してください。これらは個別に設定することもできます。
flex-direction 属性:
row: 行表示、column: 列表示、row-reverse/column-reverse: 逆方向の表示

3. align-item 属性:
flex-start: それぞれを揃えますP の頭部
flex-end: 各 P の尾部を整列させます
center: 中心線に基づいて整列させます
stretch: 領域全体を塗りつぶします、つまり、頭と尾部の両方を整列させます

4. -content 属性
は、空白スペースの形式を設定するために使用されます。これは、複数のパーツを連続して作成する場合に非常に便利です。
たとえば、親 p に 3 つの小さな p が並んで表示されているが、それらの合計幅が親 ​​p の合計幅より小さい場合、このメソッドをレイアウトに使用できます。具体的なパラメータは次のとおりです。 flex-start: 空白部分は最後にあります
flex-end: 空白部分は先頭にあります
上記 2 つの空白のメソッドは、一方の端に空白を残して、3 つの小さな p を全体として扱います
space-between:空白を中央に均等に分割します
space-around: 中央+両側に均等にスペースを残します
上記の2つは、3つのpブロックを分割し、それらを親pに均等に分割することと同等です。両側に空白もあります
添付ファイル: justify を使用します - コンテンツを要素を垂直方向と水平方向の中央に配置するために使用される方法です

p{   
justify-content:center;   
align-items:center;   
display:-webkit-flex;   
}

以上がモバイル Web ページのための CSS3 フレックス レイアウト学習ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。