flex row

<ol>
 <li>
ol {
 display: flex;
}

flex row

<ol>
 <li>
ol {
 display: flex;
 justify-content: center;
}

flex row

<ol>
 <li>
ol {
 display: flex;
 justify-content: flex-end;
}

flex row

<ol>
 <li>
ol {
 display: flex;
 justify-content: space-between;
}

flex row

<ol>
 <li>
ol {
 display: flex;
 direction: rtl;
}

flex row

<ol>
 <li>
ol {
 display: flex;
}
ol > *:nth-child(2) {
 order:  2;
}

flex row

<ol>
 <li>
ol {
 display: flex;
 justify-content: space-around;
 align-items: center;
}

flex row

<ol>
 <li>
ol {
 display: flex;
 min-height: 24em;
 justify-content: space-around;
 align-items: flex-end;
}
ol > *:nth-child(3) {
 align-self: stretch;
}

flex column

<ol>
 <li>
ol {
 min-height: 56em;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

flex row

<ol>
 <li>
ol {
 display: flex;
}

flex row

<ol>
 <li>
ol {
 display: flex;
 min-height: 180vh;
 flex-wrap: wrap;
 justify-content: space-around;
 align-items: center;
}

flex row

<ol>
 <li>
ol {
 display: flex;
 min-height: 180vh;
 flex-wrap: wrap;
 justify-content: space-around;
 align-items: self-end;
 align-content: space-between;
}

flex row

<ol>
 <li>
ol {
 display: flex;
 min-height: 200vh;
 min-width: 40em;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: center;
 writing-mode: vertical-rl;
}

flex row

<ol>
 <li>
ol {
 display: flex;
 flex-wrap: wrap-reverse;
 justify-content: space-between;
 align-items: self-start;
}