时间戳

首页 > 解决方案 > 如何使用 flexbox 对齐第二列中的内容？

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

问题描述

我想将第二列中的内容对齐，如下所示： 想要的样子

目前，它看起来像这样： 目前的样子

我相信这与我的 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;
  }
}

标签： htmlcsssassflexbox

解决方案

flex grow 和 flex shrink 为 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;
    }
}`

推荐阅读