Как я могу выровнять содержимое во втором столбце, используя flexbox?

Question

Я хотел бы выровнять содержимое во 2-м столбце, чтобы оно выглядело так:

В настоящее время это выглядит так:

Я полагал, что получилделать с моим flex-grow, flex-shrink и flex-base.но я не уверен.Вот 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

Свойство flex-basis определяет начальный размер элемента Flex, прежде чем любое доступное пространство будет распределено в соответствии с коэффициентами Flex.

Существуют другие факторы, по умолчанию 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 2

flex Grow и Flex Shrink включены, т.е. 1 по умолчанию.Вы должны отключить его, чтобы он соответствовал нужному вам интерфейсу.Вот как вы можете это сделать:

`.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;
    }
}`

Answer 3

Это поможет:

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