Bloosh Company

記事のサムネイル画像です。

2019年3月29日

Development>フロントエンド

flexボックスでコンテンツを2つ並べる!

,

cssに、flexのあれこれを記述して、HTMLでクラス名を書くだけ!


/* css */
.df{
	display: flex;
}.justify-between{
	justify-content	: space-between;
}.align-center{
	align-items: center;
}

/* レスポンシブ対応 */
@media screen and (max-width: 768px){
	.sp-db {
		display: block !important;
	}.sp-wf{
		width: 100% !important;
	}.sp-vac{
		margin: 0 auto !important;
	}.sp-tac{
		text-align: center;
	}
}



/* HTML */
<div class="df align-center sp-db justify-between">

	<div class="sp-wf">
		<img width="150" src="images/img.jpg" alt="imgの説明">
	</div>

	<div class="sp-vac sp-wf sp-tac">
		<p>右側のテキスト。</p>
	</div>

</div>

.sp-dbとか.sp-wfとか入れておけばレスポンシブ対応できて便利です。

imgの説明
右側のテキスト。

flexボックスは、まだよく理解できていませんが、いろいろ試してみて動作確認して表示がおかしくなければヨシ。
つづく。

flexボックスでコンテンツを2つ並べる! | ブルーシュカンパニー

<<次の記事

Let’s Encryptの入れ直しでエラーになったら

前の記事>>

Google Search ConsoleをDNS設定で導入する(ムームードメイン、さくらインターネットの場合)