[css]左右どちらか片方にぶち抜いたデザインを作る方法

考え方の一つとして。

デモ
1. 動作
中身
使用上の注意

デモ

Document

こんな感じを作るための理解。

動作

#layoutと#layout2の2つを作った。

#layout
幅1200px・中央配置に収まる形で<li>が組まれてる。
幅を1200px未満に狭めると横スライドになる。

#layout2
幅1200px・中央配置と同じ余白を左側につける。
<li>が画面をぶち抜いた分は横スライドする。

順番としては#layout2を作る過程で#layoutができたっていうね。
margin:0 auto;で組んでる人には不可解な感じの組み方になってる。

中身

    <div id="layout">
        <div class="wrap">
            <div class="inner">
                <ul>
                    <li>#layout</li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>

*{
    margin: 0;
    padding: 0;
}
#layout .wrap{
    margin-left: calc((100vw - 1200px) / 2);
    overflow-x: auto;
}
#layout .wrap .inner{
    width: 100%;
}
#layout .wrap .inner ul{
    width: 1200px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    list-style: none;
}
#layout .wrap .inner ul li{
    width: 280px;
    height: 400px;
    margin-left: 20px;
    background: #f5f5f5;
}
#layout .wrap .inner ul li:first-child{
    margin-left: 0;
}
@media screen and (max-width: 1200px){
    #layout .wrap{
        margin-left: 0;
    }
}

ネックは「margin-left: calc((100vw – 1200px) / 2);」。
margin:0 auto;は両サイドにマージンをもたせてるから中央配置になるけど、htmlは左詰めだから最適な数値をmargin-leftにぶち込んでも中央配置になるよねっていう。
中身（ul）を1200pxで作ってあるからこんな内容になる。

ブラウザ幅が1200px未満になった時、margin-leftはマイナス値になっちゃう。ブラウザ幅をぶち抜いてる要素を中央配置にしたいならそのままでいいけど、左詰めの横スクロールにしたいから@mediaでmarginを0にする。

それを踏まえて本題。

    <div id="layout2">
        <div class="wrap">
            <div class="inner">
                <ul>
                    <li>#layout2</li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>

*{
    margin: 0;
    padding: 0;
}
#layout2 .wrap{
    margin-left: calc((100vw - 1200px) / 2);
}
#layout2 .wrap .inner{
    width: 100%;
    overflow-x: auto;
}
#layout2 .wrap .inner ul{
    width: 2400px;
    padding: 10px;
    list-style: none;
}
#layout2 .wrap .inner ul li{
    width: 280px;
    height: 400px;
    margin-left: 20px;
    background: #f5f5f5;
    float: left;
}
#layout2 .wrap .inner ul li:first-child{
    margin-left: 0;
}

@media screen and (max-width: 1200px){
    #layout2 .wrap{
        margin-left: 0;
    }
}

<li>の数が多くて通常のブラウザなら余裕でぶち抜く場合。
<ul>の幅が変わっただけ。

で、デモではmargin-leftに振ってるのをmargin-rightに変えたら逆方向にアレできる。
ついでに<ul>もプロパティをいじれば右詰めにできる。

overflow-x: auto;は.wrap、.innerのどちらに付けても機能する。好みというか場面によって都合のいい方でやればいいと思う。

使用上の注意

横スライドする要素の幅は実数値で決めちゃったほうがいい。
というか、それ前提で組んだ。
動的に変化する内容に対応したやつはまた別で組んであるんでそちら参照。