カラムレイアウト

２カラムデザイン

左側のコンテンツ

右側のコンテンツ

html

<div class="container">
<div class="left">
左側のコンテンツ
</div>
<div class="right">
右側のコンテンツ
</div>
</div>

css

.container{
    display: flex;
}
.left{
    flex: 1;
}
.right{
    width:サイズ幅;
}

3カラムデザイン

左側のコンテンツ

中央のコンテンツ

右側のコンテンツ

html

<div class="container">
<div class="left">
左側のコンテンツ
</div>
<div class="main">
中央のコンテンツ
</div>
<div class="right">
右側のコンテンツ
</div>
</div>

css

.container{
    display: flex;
}
.left{
    width: サイズ幅;
}
.main{
    flex: 1;
}
.right{
    width: サイズ幅;
}

よく使うレイアウト

ヘッダー左側

ヘッダー右側

左側のコンテンツ

右側のコンテンツ

フッター

html

<div id="header">
<div class="left">ヘッダー左側</div><!-- left -->
<div class="right">ヘッダー右側</div><!-- right -->
</div><!-- header-->

<div class="container">
<div class="left">左側のコンテンツ</div><!-- left -->
<div class="right">右側のコンテンツ</div><!-- right -->
</div><!-- container -->

<div id="footer">フッター</div><!-- footer -->

css

body {margin: 0;}
/* =============================== header == */
#header {
    display: flex;
    padding: 10px;
    justify-content: space-between;
    align-items: flex-end;
}
#header .left {margin-left: 30px;}
#header .right {margin-right: 30px;}
/* =============================== container == */
.container {
    display: flex;
    max-width: 1200px;
    margin:40px auto 40px;
}
.container .left {
    flex: 1;
    padding: 10px;
}
.container .right {
    width: 300px;
    margin-left: 50px;
}
/* =============================== footer == */
#footer{
    text-align: center;
    padding: 20px 0;
}