Skip to content

Instantly share code, notes, and snippets.

@ivandeex
Created September 10, 2017 20:26
Show Gist options
  • Save ivandeex/25ccc906874ca13f3e91791d18eb1f77 to your computer and use it in GitHub Desktop.
Save ivandeex/25ccc906874ca13f3e91791d18eb1f77 to your computer and use it in GitHub Desktop.
flex axes and properties
<article>
<p><b>1.</b> Swanns Way - Overture</p>
<p><b>2</b> For a long time I used to go to bed early. Sometimes, when I had put out my candle, my eyes would close so quickly that I had not even time to say &quot;I'm going to sleep.&quot;</p>
<p><b>3</b> And half an hour later the thought that it was time to go to sleep would awaken me; I would try to put away the book which, I imagined, was still in my hands, and to blow out the light; I had been thinking all the time, while I was asleep. </p>
<p><b>4</b> This impression would persist for some moments after I was awake; it did not disturb my mind, but it lay like scales upon my eyes and prevented them from registering the fact that the candle was no longer burning.</p>
<p><b>5</b> by Marcel Proust</p>
</article>
body {
font-size: 12px;
}
article {
display: flex;
padding: 10px;
border: 2px dashed skyblue;
flex-flow: row-reverse wrap;
justify-content: flex-end;
align-items: center;
align-content: stretch;
height: 90vh;
transition: all .2s ease-in-out;
}
p:nth-of-type(even) { flex: 0 1 12em; }
p:nth-of-type(odd) { flex: 0 1 16em; }
p:first-of-type { flex: 0 1 3em; }
p:last-of-type { flex: 0 1 6em; }
p {
background: linear-gradient(to bottom, rgb(185,213,229) 40%,
rgb(185,208,235) 60%);
border-radius: 3px;
box-shadow: 0px 0px 2px rgba(0,200,255,.9);
padding: 10px;
margin: 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment