ruk·si
/notes

CSS
Flags

Updated at 2018-03-09 01:07

Flags are elements with text and an image right or left side of the text.

<div class="flag">
+---------+
|         | ~~~~ ~~~~~~~~~~~
|         | ~~~~~~~ ~~~~~ ~~
|         | ~~~~~~~~~~~~
+---------+

<div class="flag flag-top">
+---------+ ~~~~~~~~~~ ~~~~~
|         | ~~~~~ ~~~~~ ~~~~
|         | ~~~~~~~~~ ~~~~~~
|         |
+---------+

<div class="flag flag-bottom">
+---------+
|         |
|         | ~~~~~~~~~~ ~~~~~
|         | ~~~~~ ~~~~~ ~~~~
+---------+ ~~~~~~~~~ ~~~~~~

<div class="flag flag-reverse">
                 +---------+
~~~~~~~~~ ~~~~~~ |         |
~~~~~~~~~~ ~~~~~ |         |
~~~~~ ~~~~~ ~~~~ |         |
                 +---------+

Using Flexbox

Body Text

Body Text

Body Text

Body Text
.fflag {
    display: flex;
}
.fflag-figure {
    margin-right: 2%;
    margin-left: 0;
}
.fflag-body {
    flex: 1;
    align-self: center;
}
.fflag-top .fflag-body {
    align-self: flex-start;
}
.fflag-bottom .fflag-body {
    align-self: flex-end;
}
.fflag.fflag-reverse {
    flex-direction: row-reverse;
    text-align: right;
}
.fflag.fflag-reverse .fflag-figure {
    margin-right: 0;
    margin-left: 2%;
}

<div class="fflag">
    <img class="fflag-figure" src="http://via.placeholder.com/100x100" />
    <div class="fflag-body">Body Text</div>
</div>

<div class="fflag fflag-top">
    <img class="fflag-figure" src="http://via.placeholder.com/100x100" />
    <div class="fflag-body">Body Text</div>
</div>

<div class="fflag fflag-bottom">
    <img class="fflag-figure" src="http://via.placeholder.com/100x100" />
    <div class="fflag-body">Body Text</div>
</div>

<div class="fflag fflag-reverse">
    <img class="fflag-figure" src="http://via.placeholder.com/100x100" />
    <div class="fflag-body">Body Text</div>
</div>

Using Tables

CSS:

.flag {
    display: table;
    width: 100%;
}

.flag-image,
.flag-body {
    display: table-cell;
    vertical-align: middle;
}

.flag-top .flag-image,
.flag-top .flag-body {
    vertical-align: top;
}

.flag-bottom .flag-image,
.flag-bottom .flag-body {
    vertical-align: bottom;
}

.flag-image {
    padding-right: 10px;
}

.flag-image > img {
    display: block;
    max-width: none;
}

.flag-reverse .flag-image {
    padding-right: 0;
    padding-left: 10px;
}

.flag-body {
    width: 100%;
}

SASS:

.flag {
    display: table;
    width: 100%;
}

.flag-image,
.flag-body {
    display: table-cell;
    vertical-align: middle;
    .flag-top & {
        vertical-align: top;
    }
    .flag-bottom & {
        vertical-align: bottom;
    }
}

.flag-image {
    padding-right: 10px;
    > img {
        display: block;
        max-width: none;
    }
    .flag-reverse & {
        padding-right: 0;
        padding-left: 10px;
    }
}

.flag-body {
    width: 100%;
}

HTML:

<div class="flag">
    <div class="flag-image">
        <img src="" alt="">
    </div>
    <div class="flag-body">
        <p></p>
    </div>
</div>

<div class="flag flag-reverse">
    <div class="flag-body">
        <p></p>
    </div>
    <div class="flag-image">
        <img src="" alt="">
    </div>
</div>

Source