Making text align to the left in first cell of flexbox? - html

Question

I've got a flexbox code working in my file, this is just the relevant parts of the whole file:
.tbl {
display: flex;
flex-direction: column;
}
.row {
display: flex;
min-height: 50px;
}
.cell {
flex: 4;
border: 1px solid red;
}
.cell:nth-child(1) {
flex: 1;
}
.cell:nth-child(2) {
flex: 2;
}
.cell.span4-5 {
flex: 8 24px; /* col 4,5 flex-grow/border/padding */
}
.cell.span3-4 {
flex: 8 24px; /* col 3,4 flex-grow/border/padding */
}
.cell.span3-5 {
align-content: flex-end;
justify-content: flex-end;
flex: 12 36px; /* col 3,4,5 flex-grow/border/padding */
}
.cell.span1-1 {
width: 60px;
}
div.atalign1 {
text-align: left;
margin-bottom: 10px;
}
.row:first-child .cell {
display: flex;
justify-content: center; /* center horiz. */
align-items: center; /* center vert. */
}
.row .cell {
padding: 5px;
box-sizing: border-box;
}
<div class="tbl">
<div class="atalign1">
<div class="row">
<div class="cell span3-5">Text</div>
<div class="cell span1-1">$50,000</div>
</div>
<div class="row">
<div class="cell">1</div>
<div class="cell span3-4">Content</div>
</div>
</div>
<div class="atalign1">
<div class="row">
<div class="cell span3-5">This is my text. This is my text</div>
<div class="cell span1-1">$3,000</div>
</div>
<div class="row">
<div class="cell">1</div>
<div class="cell span3-4">Content</div>
</div>
</div>
</div>
In the second div, the text is aligned to the left; for the first one, the text will NOT align to the left, even when I tried text-align: left;
If anyone could help I'd really appreciate this!

Answer 1

This class is causing the problem:
.row:first-child .cell {
display: flex;
justify-content: center; /* center horiz. */
align-items: center; /* center vert. */
}
The text is actually aligned to the left, you're just justifing it and aligning the item so it's going crazy. See snippet below:
.tbl {
display: flex;
flex-direction: column;
}
.row {
display: flex;
min-height: 50px;
}
.cell {
flex: 4;
border: 1px solid red;
}
.cell:nth-child(1) {
flex: 1;
}
.cell:nth-child(2) {
flex: 2;
}
.cell.span4-5 {
flex: 8 24px; /* col 4,5 flex-grow/border/padding */
}
.cell.span3-4 {
flex: 8 24px; /* col 3,4 flex-grow/border/padding */
}
.cell.span3-5 {
align-content: flex-end;
justify-content: flex-end;
flex: 12 36px; /* col 3,4,5 flex-grow/border/padding */
}
.cell.span1-1 {
width: 60px;
}
div.atalign1 {
text-align: left;
margin-bottom: 10px;
}
.row .cell {
padding: 5px;
box-sizing: border-box;
}
<div class="tbl">
<div class="atalign1">
<div class="row">
<div class="cell span3-5">Text</div>
<div class="cell span1-1">$50,000</div>
</div>
<div class="row">
<div class="cell">1</div>
<div class="cell span3-4">Content</div>
</div>
</div>
<div class="atalign1">
<div class="row">
<div class="cell span3-5">This is my text. This is my text</div>
<div class="cell span1-1">$3,000</div>
</div>
<div class="row">
<div class="cell">1</div>
<div class="cell span3-4">Content</div>
</div>
</div>
</div>

Answer 2

.row:first-child .cell {
display: flex;
justify-content: center; /* center horiz. */
align-items: center; /* center vert. */
}
Because you have the div containing the text set to display: flex, the elements inside (direct descendants) will follow the justify-content and align-items rules. In this case justify-content is causing the text to be centered horizontally, while align-items is centering it vertically.
You can set it to justify-content: flex-start to align the text to the left while keeping it vertically centered.