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 サイトの他の関連記事を参照してください。