CSS3を勉強したい

CSS3Cascading Style Sheets

2カラムのページをフレックスボックスで作成する

メインコンテンツの領域とサイドバーの領域が横に並んだ2カラムのレイアウトを、フレックスボックスで実現します。

この場合、横に並べたいのはメインコンテンツのボックスとサイドバーのボックスになるでしょう。なので、これらの親要素に当たるボックスにdisplay: flex;を指定します。

これでメインコンテンツのボックスとサイドバーのボックスはflexアイテムとなりました。この時点でこれらのボックスは横に並んでいます。

これに加えて、コンテンツの幅が伸縮するようにと、その伸縮の仕方を指定します。ブラウザの幅が狭まった時の挙動を設定するということです。

2カラムでメインは伸縮、サイドは固定の場合の見本

ブラウザの幅に対して、メインコンテンツ側の幅は伸縮するが、サイドバー側の幅は変わらない、という2カラムの見本を作成します。

HTML

<div class="the_contents">
    <div class="the_main">
        <p>メインコンテンツ</p>
        <p>ブラウザが狭まればこの幅も狭まります。</p>
    </div>
    <div class="the_side">
        <p>サイドバー</p>
        <p>ブラウザの幅が変わっても、この幅は200pxの固定です。</p>
    </div>
</div>
CSS
    
.the_contents {
    display: flex;
}
.the_main {
    flex: 1 1 auto;
    background-color: #fee;
    padding: 10px;
}
.the_side {
    flex: 0 0 200px;
    background-color: #eef;
    padding: 10px;
}

メインコンテンツ側は、横幅が伸縮するflex: 1 1 auto;を指定しています。

サイドバー側は、横幅が200pxから変わらないflex: 0 0 200px;を指定しています。3番目の値(基準サイズにあたる)に、設定したい幅を指定します。

上のコードの結果が下です。

メインコンテンツ

ブラウザが狭まればこの幅も狭まります。

サイドバー

ブラウザの幅が変わっても、この幅は200pxの固定です。