使文本在flexbox的第一个单元格中向左对齐？

Posted 2023-03-06

【中文标题】使文本在flexbox的第一个单元格中向左对齐？

【英文标题】：Making text align to the left in first cell of flexbox?

【发布时间】：2021-05-21 22:42:10

【问题描述】：

我的文件中有一个 flexbox 代码，这只是整个文件的相关部分：

.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>

在第二个div中，文字左对齐；对于第一个，文本不会向左对齐，即使我尝试了 text-align: left;

如果有人能提供帮助，我将不胜感激！

【问题讨论】：

您已将 CSS 中的文本居中：.row:first-child .cell。尝试将justify-content 更改为flex-start

【参考方案1】：

这个类导致了问题：

.row:first-child .cell 
  display: flex;
  justify-content: center;         /*  center horiz. */
  align-items: center;             /*  center vert. */

文本实际上是向左对齐的，你只是在对齐它并对齐项目，所以它会变得疯狂。见下面的 sn-p：

.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>

【参考方案2】：

.row:first-child .cell 
  display: flex;
  justify-content: center;         /*  center horiz. */
  align-items: center;             /*  center vert. */

因为您将包含文本的 div 设置为 display: flex，所以里面的元素（直接后代）将遵循 justify-content 和 align-items 规则。在这种情况下，justify-content 使文本水平居中，而align-items 使文本垂直居中。

您可以将其设置为justify-content: flex-start 以使文本左对齐，同时保持垂直居中。