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

Question

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

当前，它看起来像这样：

我相信这与我的弹性增长，弹性收缩和弹性基础有关。但我不确定。这是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;
  }
}

Answer 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;
        }
      }

Answer 2

flex-basis属性指定弹性项目的初始大小，然后根据弹性因子分配任何可用空间。

还有其他因素，默认情况下为flex-grow: 0和flex-shrink: 1，这意味着仅应用flex-basis值仍然可以缩小。

在您的情况下，应将flex-shrink: 0与flex-basis: 200px或flex: 0 0 200px的简写方式一起设置。您还可以应用min-width和max-width那些可以为弹性项目添加更多限制的地方。

下面是简化的示例：

.work-meta-row {
  display: flex;
}

.work-meta-label {
  font-weight: bold;
  flex: 0 0 200px;
}

.work-meta-value {
  flex: 1;
}

<div class="work-meta-row">
  <div class="work-meta-label">
    Platform
  </div>
  <div class="work-meta-value">
    iOS, Android
  </div>
</div>
<div class="work-meta-row">
  <div class="work-meta-label">
    Year
  </div>
  <div class="work-meta-value">
    2017
  </div>
</div>
<div class="work-meta-row">
  <div class="work-meta-label">
    Role
  </div>
  <div class="work-meta-value">
    Lead Designer. User Research, Prototyping, Wireframing, User Testing, User Interface Design, Product Strategy, Product Management, Lorem Ipsum 1, Lorem Ipsum 2
  </div>
</div>

Answer 3

弹性增长和弹性收缩默认为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;
    }
}`