ホームページ > 記事 > ウェブフロントエンド > CSS Flexの使い方を詳しく解説
1. flex を使用して p をレイアウトし、別の p# 内で水平方向および垂直方向の中央に配置できます。
##例: html コード:
<p class="container"> <p class="box"> </p> </p>
css コード:
.container{ width:600px; height:400px; border:1px solid blue; display: flex; justify-content:center; align-items:center; } .box{ width:200px; height:100px; border:1px red solid;
ps: このようにして、水平方向に中央揃えにすることができます。垂直
2. flex
<p class="items"> <p class="item">1</p> <p class="item">23</p> <p class="item">4</p> </p>
の属性アイテムに書き込むことができる属性は 6 つあります:
•flex -direction
•flex-wrap
•flex-flow
•justify-content
•align-items
•align-content
設定できる項目は 6 つあります。アイテムに書かれている:
•order//これは別に与えられたアイテムです、そのアイテムの順序を変更したい場合は、そのアイテムにこの属性を与えます
•flex-grow
•flex -shrink
•flex-basis
•flex
•align-self
以上がCSS Flexの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。