22 #Row-single Row-single

22.1 #Row-single.align-self-baseline Columns align-self: baseline

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-row__col.-align-self-baseline

I am first in the markup
I am second in the markup
I am third in the markup
Html 
    <div class="sf-row">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4 -align-self-baseline">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>third</strong> in the markup
       </div>
    </div>

22.2 #Row-single.align-self-center Columns align-self: center

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-row__col.-align-self-center

I am first in the markup
I am second in the markup
I am third in the markup
Html 
    <div class="sf-row">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4 -align-self-center">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>third</strong> in the markup
       </div>
    </div>

22.3 #Row-single.align-self-end Columns align-self: flex-end

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-row__col.-align-self-end

I am first in the markup
I am second in the markup
I am third in the markup
Html 
    <div class="sf-row">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4 -align-self-end">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>third</strong> in the markup
       </div>
    </div>

22.4 #Row-single.align-self-stretch Columns align-self: stretch (default)

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-row__col.-align-self-stretch

If emitted align-self: stretch

I am first in the markup
I am second in the markup
I am third in the markup
Html 
    <div class="sf-row">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4 -align-self-stretch">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>third</strong> in the markup
       </div>
    </div>

22.5 #Row-single.flex-auto Columns which are auto flexible ('flex: auto')

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-row__col.-auto-flex

.sf-row__col.-col-6.-auto-flex
.sf-row__col.-col-6
Html 
    <div class="sf-row">
       <div class="sf-row__col -col-6 -auto-flex">
           .sf-row__col.-col-6.-auto-flex
       </div>
       <div class="sf-row__col -col-6">
           .sf-row__col.-col-6
       </div>
    </div>

22.6 #Row-single.flex-start Columns align-self: flex-start

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-row__col.-align-self-start

I am first in the markup
I am second in the markup
I am third in the markup
Html 
    <div class="sf-row">
       <div class="sf-row__col -col-4">
           I am <strong>first</strong> in the markup
       </div>
       <div class="sf-row__col -col-4 -align-self-start">
           I am <strong>second</strong> in the markup
       </div>
       <div class="sf-row__col -col-4">
           I am <strong>third</strong> in the markup
       </div>
    </div>
.sf-row__col.-hidden: I am hidden for all resolutions
.sf-row__col
.sf-row__col
Html 
    <div class="sf-row">
       <div class="sf-row__col -hidden">
           .sf-row__col.-hidden: I am hidden for all resolutions
       </div>
       <div class="sf-row__col">
           .sf-row__col
       </div>
       <div class="sf-row__col">
           .sf-row__col
       </div>
    </div>

22.8 #Row-single.no-flex Columns which are not flexible ('flex: none')

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-row__col.-no-flex

.sf-row__col.-col-6.-no-flex
.sf-row__col.-col-6
Html 
    <div class="sf-row">
       <div class="sf-row__col -col-6 -no-flex">
           .sf-row__col.-col-6.-no-flex
       </div>
       <div class="sf-row__col -col-6">
           .sf-row__col.-col-6
       </div>
    </div>

22.9 #Row-single.no-gutter Columns with no gutter

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-row__col.-no-gutter

.sf-row__col.-col-6.-no-gutter
.sf-row__col.-col-6
Html 
    <div class="sf-row">
       <div class="sf-row__col -col-6 -no-gutter">
           .sf-row__col.-col-6.-no-gutter
       </div>
       <div class="sf-row__col -col-6">
           .sf-row__col.-col-6
       </div>
    </div>