メディアレイアウト

by Kissy

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Flexbox Layout</title>
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <h1>Media Layout</h1>
        <div class="media media-top">
            <img class="media-figure" src="//placehold.jp/50x50.png">
            <div class="media-body">
                あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。
            
                <div class="media media-center">
                    <img class="media-figure" src="//placehold.jp/50x50.png">
                    <div class="media-body">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</div>
                </div>
                <div class="media media-bottom media-reverse">
                    <img class="media-figure" src="//placehold.jp/50x50.png">
                    <div class="media-body">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。</div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

body {
    background: #eee;
}

/* Media Layout */
.media {
    display: flex;

    max-width: 420px;
    background: #fff;
    border: solid 1px #ddd;
    border-radius: 5px;
    padding: 1em;
}
.media + .media,
.media .media {
    background: #eee;
    margin: 1em 0;
}
.media-top {
    align-items: flex-start;
}
.media-center {
    align-items: center;
}
.media-bottom {
    align-items: flex-end;
}
.media-figure {
    margin-right: 1em;
}
.media-body {
    flex: 1;
}
.media-reverse > .media-figure {
    order: 1;
}