Flex: Default

<style>
    .sample-box {
        border: 1px solid #ccc;
        display: inline-block;
    }

    .sample-height {
        height: 100px;
    }
</style>

<div class="h2_guide-title">Flex</div>

<p><code>.#{$brandName}-l-flex</code>で囲むとflexboxのlayoutを使えます。</p>

<div class="_guide-box">
    <code>.yui-l-flex</code>
    <div class="yui-l-flex">
        <div class="l-box">
            <div class="sample-box"><code>.l-box</code></div>
        </div>
        <div class="l-box">
            <div class="sample-box"><code>.l-box</code></div>
        </div>
        <div class="l-box">
            <div class="sample-box"><code>.l-box</code></div>
        </div>
    </div>
</div>

<div class="_guide-box">
    <code>.yui-l-flex</code>
    <div class="yui-l-flex">
        <div class="l-left op-auto">
            <div class="sample-box"><code>.l-left.op-auto</code></div>
        </div>
        <div class="l-right">
            <div class="sample-box"><code>.l-right</code></div>
        </div>
    </div>
</div>

<hr class="hr_guide-line">

<div class="h2_guide-title">Flex layout </div>
<div class="_guide-box">
    <h3>.yui-l-flex.op-flx-row-reverse</h3>
    <div class="yui-l-flex op-flx-row-reverse">
        <div class="l-box">
            <div class="sample-box"><code>.l-box 1</code></div>
        </div>
        <div class="l-box">
            <div class="sample-box"><code>.l-box 2</code></div>
        </div>
        <div class="l-box">
            <div class="sample-box"><code>.l-box 3</code></div>
        </div>
    </div>

    <div class="_guide-box">
        <h3>.yui-l-flex.op-flx-center</h3>
        <div class="yui-l-flex op-flx-center">
            <div class="l-box">
                <div class="sample-box"><code>.l-box 1</code></div>
            </div>
            <div class="l-box">
                <div class="sample-box"><code>.l-box 2</code></div>
            </div>
            <div class="l-box">
                <div class="sample-box"><code>.l-box 3</code></div>
            </div>
        </div>
    </div>

    <div class="_guide-box">
        <h3>.yui-l-flex.op-flx-end</h3>
        <div class="yui-l-flex op-flx-end">
            <div class="l-box">
                <div class="sample-box"><code>.l-box 1</code></div>
            </div>
            <div class="l-box">
                <div class="sample-box"><code>.l-box 2</code></div>
            </div>
            <div class="l-box">
                <div class="sample-box"><code>.l-box 3</code></div>
            </div>
        </div>
    </div>

    <div class="_guide-box">
        <h3>.yui-l-flex.op-flx-middle</h3>
        <div class="yui-l-flex op-flx-middle">
            <div class="l-box">
                <div class="sample-box"><code>.l-box 1</code></div>
            </div>
            <div class="l-box">
                <div class="sample-box sample-height"><code>.l-box 2</code></div>
            </div>
            <div class="l-box">
                <div class="sample-box"><code>.l-box 3</code></div>
            </div>
        </div>
    </div>

    <div class="_guide-box">
        <h3>.yui-l-flex.op-flx-bottom</h3>
        <div class="yui-l-flex op-flx-bottom">
            <div class="l-box">
                <div class="sample-box"><code>.l-box 1</code></div>
            </div>
            <div class="l-box">
                <div class="sample-box sample-height"><code>.l-box 2</code></div>
            </div>
            <div class="l-box">
                <div class="sample-box"><code>.l-box 3</code></div>
            </div>
        </div>
    </div>

    <div class="_guide-box">
        <h3>.yui-l-flex.op-flx-around</h3>
        <div class="yui-l-flex op-flx-around">
            <div class="l-box">
                <div class="sample-box"><code>.l-box 1</code></div>
            </div>
            <div class="l-box">
                <div class="sample-box"><code>.l-box 2</code></div>
            </div>
            <div class="l-box">
                <div class="sample-box"><code>.l-box 3</code></div>
            </div>
        </div>
    </div>

    <div class="_guide-box">
        <h3>.yui-l-flex.op-flx-between</h3>
        <div class="yui-l-flex op-flx-between">
            <div class="l-box">
                <div class="sample-box"><code>.l-box 1</code></div>
            </div>
            <div class="l-box">
                <div class="sample-box"><code>.l-box 2</code></div>
            </div>
            <div class="l-box">
                <div class="sample-box"><code>.l-box 3</code></div>
            </div>
        </div>
    </div>

    <hr class="hr_guide-line">