Flexbox: Flex flow

Testing out flexbox: - flex direction - flex wrap

by michananya

HTML

<div class="flex-container">
    <div class="flex-item"> 
        <div> esfghm Oneadasdagafsfghgdfgdfgdfgdfsfg sfgh sfgh gdfgdfgadfgagadfg 123 456 789:</div>
        <div> em:</div>
        <div> em gfh:</div>
        <div> em hgfhghgh:</div>
    </div>
    <div class="flex-item">
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
        <div>Item Two</div>
        <div>Item Two</div>
        <div>Item Two</div>
    </div>
</div>

CSS

.flex-row {
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrpa;
    flex-flow: row wrap;
}

.flex-column {
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
}

.flex-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;

}
.flex-container > .flex-item:first-child {

}
.flex-container > .flex-item:first-child > div {
  max-width:50%;
  overflow: hidden;
  text-overflow: ellipsis;
    white-space: nowrap;
}
.flex-container > .flex-item:last-child {
  margin-left: 10px;
  font-weight: bold;

}
.flex-container > .flex-item:last-child > div {
  overflow: hidden;
  max-width:50%;
  text-overflow: ellipsis;
    white-space: nowrap;
  }