• このエントリーをはてなブックマークに追加

display:flexというものが、追加されてCSSのレイアウトが複雑に、また簡単に行えるようになってきている。これより過去にはfloat:left;などを使って、要素を浮かせて、右や左に配置し、その後の要素はclearして、レイアウトを横並びさせることを実現していた。

ナビゲーション固定幅・メイン幅は残りの幅

特定の横並びのボックスの一部に固定値そして、他のボックスに対しては自動となるように指定することで、可変にしたいところを活かしつつ、固定にしたいことを実現できる。

HTML

<div id=”wrapper”>
<div id=”main”>
main
</div>
<div id=”sub1″>
sub1
</div>
</div>

CSS

#wrapper{
display:flex;
}
#main {
flex:1;
}
#sub1{
width:20vw;
}