Flex: Column

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

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

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

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

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

<hr class="hr_guide-line">