flex axes and properties

flex-axes-and-properties.markdown

flex axes and properties

A Pen by Ivan Andreev on CodePen.

License.

index.html

<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>

style.css

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;
}