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