努力使项目框的边框垂直对齐？

Question

是否可以使flex子级垂直对齐？

示例

在这种情况下，左侧的“软件开发”框应稍微增加一点，以使上方的“反应”与下方的“反应”对齐。 “ Web”，“软件”等也是如此。显然，下面图片中的框略有对齐是很烦人的...

是否存在我所描述的flexbox属性？

解决方案应该是动态的

Answer 1

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input data-val="true" data-val-number="The field TotalValue must be a number." id="Notice_NoticeDetails_0__TotalValue" name="Notice.NoticeDetails[0].TotalValue" type="text" value="">非常适用于水平布局控制，但并非旨在处理垂直布局。考虑将Flexbox与CSS Grid进行类似的布局。一旦确定了许多列（在本例中为7），就可以添加一些JavaScript，以根据文本长度确定列JavaScript。这是一个简单的原型，但可以进一步开发以处理边缘情况规则。

span

let listItems = document.querySelectorAll(".grid li");

listItems.forEach(item => {
  const len = item.innerText.length;
  if (len > 15 && len < 20) {
    item.classList.add('span-2');
  } else if (len >= 20) {
    item.classList.add('span-3');
  } // etc.
});

.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr; 
  margin: 0;
  padding: 0;
  list-style: none;
}

.grid li {
  text-align: center;
  border: .5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 100%;
  padding: .35em;
}

.span-2 {
  grid-column: span 2;
}

.full-width {
  grid-column: 1 / -1;
}

jsFiddle