text in div full

a crim for text in div full

by Leon Rom

HTML

flex-flow: column;
<br/>
<br/>justify-content: flex-start;
<div class="main-container flex-start">
    <div class="cells-block"> <span>align-items :<br/>flex-start;</span> </div>
    <div class="cells-block"> <span>align-items :<br/>center;	 </span> </div>
    <div class="cells-block"> <span>align-items :<br/>flex-end;	 </span> </div>
</div>
justify-content: center;
<div class="main-container center">
    <div class="cells-block"> <span>align-items :<br/>flex-start;</span> </div>
    <div class="cells-block"> <span>align-items :<br/>center;	 </span> </div>
    <div class="cells-block"> <span>align-items :<br/>flex-end;	 </span> </div>
</div>
justify-content: flex-end;
<div class="main-container flex-end">
    <div class="cells-block"> <span>align-items :<br/>flex-start;</span> </div>
    <div class="cells-block"> <span>align-items :<br/>center;	 </span> </div>
    <div class="cells-block"> <span>align-items :<br/>flex-end;	 </span> </div>
</div>

CSS

.main-container {
    display: flex;
    flex-flow: row;
    position: relative;
    background: aqua; border: solid 1px red;
    height: 77px;    width: 444px;  margin-bottom: 6px;
}

.main-container.flex-start{    justify-content: flex-start;}

.main-container.center 	  {    justify-content: center;}

.main-container.flex-end  {    justify-content: flex-end;}

.cells-block {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: inherit;
}

.cells-block:nth-child(1) {
    align-items: flex-start;
    background: lightgreen;
    text-align: left;
}

.cells-block:nth-child(2) {
    align-items: center;
    background: pink;
    text-align: center;
}

.cells-block:nth-child(3) {
    align-items: flex-end;
    background: aqua;
    text-align: right;
}