Flexbox Practice


by Jeremy Caudle
notes

I'm doing another one of these on my phone, so this one may be more for quick reference than real practice. They can't all be perfect, but every little bit helps.

flex-flow: row; (align-self set on individual elements)
  • End
  • Center
  • Start
flex-flow: column; (align-self set on individual elements)
  • End
  • Center
  • Start

View the code:

HTML and JS 
<div class="codedoodle-block">

<h6>flex-flow: row; (align-self set on individual elements)</h6>
<ul class="flex-row">
<li class="flex-end">End</li>
<li class="center">Center</li>
<li class="flex-start">Start</li>
</ul>

<h6>flex-flow: column; (align-self set on individual elements)</h6>
<ul class="flex-col">
<li class="flex-end">End</li>
<li class="center">Center</li>
<li class="flex-start">Start</li>
</ul>

</div>
CSS 
.codedoodle-block {
margin: 2rem 0;
padding: 1em;
border: solid 1px rgba(0,0,0,.1);
}

.codedoodle-block ul li {
display: block;
}

.flex-row {
display: flex;
flex-flow: row;
width: 100%;
height: 2rem;
background-color: #eeeeee;
justify-content: space-between;
}

.flex-col {
display: flex;
flex-flow: column;
justify-content: flex-end;
max-width: 20%;
}

.flex-start {
align-self: flex-start;
}

.center {
align-self: center;
}

.flex-end {
align-self: flex-end;
}

Tags