Can't get multiple flexbox children to position or center - html

Question

A short JSfiddle to demonstrate my problem JSFIDDLE.
My objectives are:
The date should be centered both horizontally and vertically in its rectangle.
The subtitle should be below the title.
li {
display: flex;
align-items: center;
background-color: pink;
}
.date {
background-color: orange;
width: 50px;
height: 50px;
text-align: center;
margin-right: 5px;
}
ol {
list-style: none;
}
<ol>
<li>
<div class="date">Apr<br>01</div>
<h3>
Blog Title
</h3>
<p>
Subtitle - should be below title
</p>
</li>
<li>
<div class="date">Mar<br>01</div>
<h3>
Another Blog Title
</h3>
<p>
Subtitle - should be below title
</p>
</li>
</ol>

Answer 1

I use flexbox a lot but with divs mostly. Using other HTML elements is valuable for me, when there are preset styles for them for the whole application, then it is easier :)
Here is how I would do this (CSS explained under snippet):
.container {
display: inline-flex;
width: 100%;
background-color: pink;
}
.date {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 50px;
width: 50px;
background-color: orange;
margin-right: 5px;
}
.info {
display: flex;
flex-direction: column;
justify-content: center;
}
.title {
font-weight: bold;
font-size: 20px;
}
<div class="container">
<div class="date">
<div>Apr</div>
<div>01</div>
</div>
<div class="info">
<div class="title">Another Blog Title</div>
<div>Subtitle - should be below title</div>
</div>
</div>
1) .container
display: inline-flex -> date and info text items are inline
width: 100% -> fit parent width.. can be set fixed to 300px for example
2) .date & .info
display: flex -> using flexbox, not inline. Make other flexbox CSS properties works and adds own adjustments
flex-direction: column -> this makes children align under each other (into column)
align-items: center -> when flex-direction is active this will align children horizontaly, otherwise vertically
justify-content: center -> when flex-direction is active, this will align children vertically, otherwise horizontally
As for your snippet, just adjust it this way:
li {
display: flex;
align-items: center;
background-color: pink;
}
.date {
display: flex;
justify-content: center;
align-items: center;
background-color: orange;
width: 50px;
height: 50px;
text-align: center;
margin-right: 5px;
}
.info {
display: flex;
flex-direction: column;
}
h3 {
margin: 0px;
}
p {
margin: 0px;
}
ol {
list-style: none;
}
<ol>
<li>
<div class="date">Apr<br>01</div>
<div class="info">
<h3>
Blog Title
</h3>
<p>
Subtitle - should be below title
</p>
</div>
</li>
<li>
<div class="date">Mar<br>01</div>
<div class="info">
<h3>
Another Blog Title
</h3>
<p>
Subtitle - should be below title
</p>
</div>
</li>
</ol>
Explanation of this CSS is under the first snippet. I just removed margins from h3 and p elements, so it does not break layout :)
Hope it helps you.
I learned a lot of flexbox from this article -> https://css-tricks.com/snippets/css/a-guide-to-flexbox
Give it a try and GL ;)

Answer 2

The date should be centred both horizontally and vertically in its rectangle.
.date {
background-color: orange;
width: 70px;
height: 70px;
text-align: center;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
Using Flexbox, you can just add justify-content: center for horizontal and align-items: center for vertical alignments. But you'd need to set the display:flex first.
The subtitle should be below the title.
For this, you can set the display to flex and use the flex-direction on the main container, in this case it'll be your ordered list <ol> element. Then update the <li> element to also use flex and
ol {
display: flex;
flex-direction: column;
}
li {
flex: 1;
flex: wrap;
align-items: center;
background-color: pink;
}

Answer 3

To center contents of .date on both directions you can use flexbox:
.date {
display:flex;
align-items: center; /* centers vertically */
justify-content: center; /* centers horizontally */
}
To display the <h3> above the <p> you could give them a wrapper with:
.date + div {
display: flex;
flex-direction: column;
align-items: flex-start; /* align children to left side */
justify-content: center; /* center vertically */
}
You might also want to remove the margins on the <h3>s and <p>s;
.date + div > * {
margin: 0;
}
li {
display: flex;
align-items: center;
background-color: pink;
}
.date {
background-color: orange;
width: 50px;
height: 50px;
margin-right: 5px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.date + div {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.date + div > * {
margin: 0;
}
ol {
list-style: none;
}
<ol>
<li>
<div class="date">Apr<br>01</div>
<div>
<h3>
Blog Title
</h3>
<p>
Subtitle - should be below title
</p>
</div>
</li>
<li>
<div class="date">Mar<br>01</div>
<div>
<h3>
Another Blog Title
</h3>
<p>
Subtitle - should be below title
</p>
</div>
</li>
</ol>
Important note: You might notice align-items and justify-contents refer to different directions when used on first, respectively the second child of your <li>s. That's because they're dependent on the flex-direction, as follows:
justify-content controls alignment on the direction of flex-direction
align-items controls alignment on the direction perpendicular on flex-direction
default flex-direction value is row

Answer 4

Please see below. I documented the changes in the source.
li {
display: flex;
align-items: center;
background-color: pink;
}
.date {
background-color: orange;
width: 50px;
height: 50px;
text-align: center;
margin-right: 5px;
display: flex; /* Added */
align-items: center; /* Added */
justify-content: center; /* Added */
}
ol {
list-style: none;
}
/* Added */
.titles h3 {
margin: 0.5rem 0 0 0;
}
/* Added */
.titles p {
margin: 0.5rem 0 0 0;
}
<ol>
<li>
<div class="date">Apr<br>01</div>
<!-- Extra wrapper added -->
<div class="titles">
<h3>
Blog Title
</h3>
<p>
Subtitle - should be below title
</p>
</div>
</li>
<li>
<div class="date">Mar<br>01</div>
<!-- Extra wrapper added -->
<div class="titles">
<h3>
Another Blog Title
</h3>
<p>
Subtitle - should be below title
</p>
</div>
</li>
</ol>

Answer 5

You should use ol/ul li elements when you want to define an ordered/unordered list of elements, for example a navigation bar. What you are doing now is not semantically correct.
Take a look at: float and clear properties.
I rewrited your code using float and clear properties. In order to center the date, since it is a static content, just remove the height property and add a padding for create your margins. At last, instead of using float: right for your content, I used display flex properties.
.group:after {
content: "";
display: table;
clear: both;
}
#preview {
background-color: pink;
}
#preview .group {
display: flex;
}
.date {
float: left;
background-color: orange;
width: 50px;
text-align: center;
padding: 8px 5px;
}
.content {
flex: 1;
margin-left: 5px;
}
.content h3 {
margin: 0;
}
.content p {
margin: 0;
}
<div id="preview">
<div class="group">
<div class="date">Apr<br>01</div>
<div class="content">
<h3>Blog title</h3>
<p>Subtitle - should be below title</p>
</div>
</div>
<div class="group">
<div class="date">Mar<br>01</div>
<div class="content">
<h3>Another Blog title</h3>
<p>Subtitle - should be below title</p>
</div>
</div>
</div>