フレックスレイアウト方法（css3エラスティックレイアウトチュートリアル）

この記事では主に CSS3 伸縮自在レイアウトの flex レイアウトを詳しく紹介します。興味のある方は参考にしてください。

.container{
	align-items: center;
	justify-content: center;

	display: flex;
	background: white url(image/baby.jpg) no-repeat center;
	background-size: auto 100%;
}

.text{
	display: flex;
 	align-items: center;
	height: 3rem;

	color: white;
	font-family: helvetica, sans-serif;
	font-size: 1.5rem;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow:0 0 1.2rem hsla(0,100%,100%,.4);
	box-shadow: 0 0 1.5rem hsla(0,100%,0%,.4);
	border-radius: .5rem;
}

整列設定: コンテナ内で要素の整列を設定します。要素自体。

単位: px ピクセル、解像度を基準、em は現在のオブジェクト内のテキストのフォント サイズを基準、rem (ルート em) は Web ページのルート要素のテキスト フォント サイズを基準とします。

CSS を学習する必要がある学生は、php 中国語 Web サイト

CSS ビデオ チュートリアル

に注目してください。多くの CSS オンライン ビデオ チュートリアルを無料で視聴できます。

以上がフレックスレイアウト方法（css3エラスティックレイアウトチュートリアル）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。