flex layout

by kzoon

HTML

<div class='outer'>
    <div class='thumb'></div>
    <div class='texts'>
        <div class='name'>Name</div>
        <div class='description'>Description</div>
    </div>
    <div class='icon'>icon</div>
</div>

CSS

.outer {
    border: 1px solid black;
    width:100%;
    height:30vh;
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
}
.thumb {
    width:30vh;
    height:30vh;
    border: 1px solid blue;
    background: url(http://www.addictedtoibiza.com/wp-content/uploads/2012/12/example.png) yellow;
    background-position: 50% 100%;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}
.texts {
    padding-left:10px;
    border: 1px solid red;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    display:-webkit-flex;
    display:flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.name {
    font-size:1.5em;
}
.description {
    font-size:1em;
}
.icon {
    border: 1px solid green;
    width:10vh;
    height:10vh;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}