CSS html

Flexbox を利用してレスポンシブなレイアウトを実現する

2018年9月16日

タイトルのままです。Flexbox を利用して 2 カラムのレスポンシブレイアウトを実現する例です。コピペしてそのまま使えますので、よかったら使ってみてください。

CSS

.header{
    background: lightpink;
    height: 40px;
    width: 100%;
}
.parent{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 90vh;
}
.main{
    background: lightblue;
    height: 50%;
 }
.sidebar{
    background: lightseagreen;
    height: 50%;
}
@media screen and (min-width : 768px) { /* デスクトップ用 CSS */
    .parent{
        flex-direction: row;
    }
    .main{
        flex: 1;
        height: 100%;
    }
    .sidebar{
        width: 250px;
        height: 100%;
    }
}

HTML

<div class="header">header</div>
<div class="parent">
    <div class="main">item 1</div>
    <div class="sidebar">item 2</div>
</div>

-CSS, html