CSSで片方を固定、片方を可変のレイアウトを実装

こんばんは

IE8・9ではdisplay: flex;が使えないがために片方を固定にして、
片方を可変にするのが中々大変でした。

今のモダンブラウザはdisplay: flex;に対応しているので
どんどん使っていきましょう。

display: flex;の対応表

実装する方法はとても簡単です。

index.html

<div class="wrapper">
<div class="column-1">
<!– 可変 –>
</div>
<div class="column-2">
<!– 固定 –>
</div>
</div>

index.css

.wrapper {
display: flex;
height: 100px;
}

.column-1 {
background-color: blue;
flex: 1;
}

.column-2 {
background-color: red;
width: 200px;
}

これだけでOKです！

display: flex;は使いこなせると、とても便利なので
覚えとくと良いかと思います。