Centering with align-items center everything but not left-aligned - html

Question

Thank you for reading the post. I'm having a weird issue with Flexbox. I have a div container with some divs that need to be displayed 3 items in a row, 2 items for screen sizes less than 992 and 1 item for less than 568.
To achieve this I used display: flex and flex-wrap: wrap to the container and flex: 1 0 26% to the inner divs. It seems to be working fine but the problem is with the inner contents of the divs. They are all left-aligned.
I then used display: flex, flex-direction: column and align-items: center to the inner container but then all the inner contents get centered but not left-aligned.
Here's the issue:
Here's what I've been trying to achieve:
Here's the snippet:
#topic-list {
display: flex;
flex-wrap: wrap;
}
#topic-list div.list-wrapper {
flex: 1 0 26%;
margin: 10px;
border: 1px solid #ccc;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
<div id="topic-list">
<div class="list-wrapper">
<div class="el">A</div>
<div>
Apple
</div>
</div>
<div class="list-wrapper">
<div class="el">B</div>
<div>
Ball
</div>
</div>
<div class="list-wrapper">
<div class="el">F</div>
<div>
Fan
</div>
<div>
Fanta
</div>
<div>
Follow
</div>
</div>
<div class="list-wrapper">
<div class="el">I</div>
<div>
Inspire
</div>
</div>
<div class="list-wrapper">
<div class="el">L</div>
<div>
Love
</div>
</div>
<div class="list-wrapper">
<div class="el">M</div>
<div>
Mad
</div>
<div>
Money
</div>
<div>
Mother
</div>
</div>
<div class="list-wrapper">
<div class="el">S</div>
<div>
Sad
</div>
<div>
Son
</div>
<div>
Sick
</div>
</div>
<div class="list-wrapper">
<div class="el">T</div>
<div>
Tea
</div>
<div>
Total
</div>
</div>
<div class="list-wrapper">
<div class="el">W</div>
<div>
Wrap
</div>
</div>
</div>

Answer 1

You can have one more div inside the list-wrapper and make its text align left.
#topic-list {
display: flex;
flex-wrap: wrap;
}
#topic-list div.list-wrapper {
flex: 1 0 26%;
margin: 10px;
border: 1px solid #ccc;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
.test {
text-align: left;
}
<div id="topic-list">
<div class="list-wrapper">
<div class='test'>
<div class="el">A</div>
<div>
Apple
</div>
</div>
</div>
<div class="list-wrapper">
<div class='test'>
<div class="el">B</div>
<div>
Ball
</div>
</div>
</div>
<div class="list-wrapper">
<div class='test'>
<div class="el">F</div>
<div>
Fan
</div>
<div>
Fanta
</div>
<div>
Follow
</div>
</div>
</div>
<div class="list-wrapper">
<div class='test'>
<div class="el">I</div>
<div>
Inspire
</div>
</div>
</div>
<div class="list-wrapper">
<div class='test'>
<div class="el">L</div>
<div>
Love
</div>
</div>
</div>
<div class="list-wrapper">
<div class='test'>
<div class="el">M</div>
<div>
Mad
</div>
<div>
Money
</div>
<div>
Mother
</div>
</div>
</div>
<div class="list-wrapper">
<div class='test'>
<div class="el">S</div>
<div>
Sad
</div>
<div>
Son
</div>
<div>
Sick
</div>
</div>
</div>
<div class="list-wrapper">
<div class='test'>
<div class="el">T</div>
<div>
Tea
</div>
<div>
Total
</div>
</div>
</div>
<div class="list-wrapper">
<div class='test'>
<div class="el">W</div>
<div>
Wrap
</div>
</div>
</div>
</div>