問題
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;
}
コメント