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

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，这些可以为flex项目添加额外的限制。

以下是简化示例：

.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

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