如何使用 flexbox 对齐第二列中的内容？

Posted 2023-03-06

【中文标题】如何使用 flexbox 对齐第二列中的内容？

【英文标题】：How can I align the content in the 2nd column using flexbox?

【发布时间】：2019-02-24 23:54:21

【问题描述】：

我想将第 2 列中的内容对齐，如下所示：

目前，它看起来像这样：

我认为这与我的 flex-grow、flex-shrink 和 flex-basis 有关。但我不确定。这是JSFiddle。 https://jsfiddle.net/onestaryx/c70yg2t9/2/

.work-meta-row
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  align-self: flex-start;
  justify-content: flex-start;
  line-height: 22px;
  flex-wrap: nowrap;
  .work-meta-label
    font-weight: bold;
    flex-basis: 200px;
  
  .work-meta-value
    flex-grow:1;
  

【问题讨论】：

您好，请在您的帖子中添加minimal reproducible example。

【参考方案1】：

这样就可以了：

      .work-meta-row
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        align-self: flex-start;
        justify-content: flex-start;
        line-height: 22px;
        flex-wrap: nowrap;
        .work-meta-label
          font-weight: bold;
          flex: 0 0 200px;
        
      

【参考方案2】：

flex 增长和 flex 收缩是开启的，即默认为 1。您需要禁用它以匹配您需要的 UI。你可以这样做：

`.work-meta-row 
    display: flex;
    line-height: 22px;

    .work-meta-label 
        font-weight: bold;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 100px;
    
`

或与 flex 速记一起使用，例如：

`.work-meta-row 
    display: flex;
    line-height: 22px;

    .work-meta-label 
        font-weight: bold;
        flex: 0 0 100px;
    
`

【讨论】：

不客气。如果解决方案满足您的要求，您能否将此标记为正确答案？

我做到了，但遗憾的是我没有足够的声誉，所以我的选票不算数：P

哦，好的。谢谢。没问题。