問題 × 解決策

Flexboxで固定と可変のレイアウトにする方法

問題

Flexboxで固定と可変のレイアウトにするには?

解決策

一方の子要素にwidthを設定し、もう一方の子要素に「flex-grow: 1;」を設定する。

 

固定と可変のレイアウト

Flexboxで固定と可変のレイアウトにする方法をご紹介します。

DEMOはこちら

アイテム

アイテム

「width」と「flex-grow」を設定する。

一方の子要素にwidthを設定し、もう一方の子要素に「flex-grow: 1;」を設定する。

HTML

<div class="flex-double">
	<p class="item">アイテム</p>
	<p class="item">アイテム</p>
</div>

CSS

.flex-double{
    display: flex;
}
.flex-double .item{
	margin-right: 10px;
	padding: 10px;
	text-align: center;
	background-color: #FCECE8;
}
.flex-double .item:first-child{
	width: 90px;
}
.flex-double .item:last-child{
	margin-right: 0;
	flex-grow: 1;
}

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

15 + 20 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧