html - 力求垂直对齐元素框的边框？

Question

是否可以让 flex children 垂直对齐？

示例

在这种情况下，左侧的“softwaredevelopment”框应该增加一点，以便上面的“react”与下面的“react”对齐。 “网络”、“软件”等也是如此……？显然，下图中方框的轻微错位有点烦人......

是否存在可以实现我所描述的功能的 flexbox 属性？

解决方案应该是动态的

Answer 1

Flexbox 非常适合水平布局控制，但不是为处理垂直布局而设计的。考虑使用 CSS Grid 和 JavaScript 来实现这样的布局。一旦我们决定了列数(在本例中为 7)，我们就可以添加一些 JavaScript，根据文本长度决定列的 span。这是一个简单的原型(prototype)，但可以进一步开发以处理边缘情况规则。

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

<ul class="grid">
  <li class="full-width">Show all</li>
  <li>Python</li>
  <li>NodeJS</li>
  <li>React</li>
  <li>Web</li>
  <li>Software</li>
  <li>React</li>
  <li>Webdev</li>
  <li>Sofware Development</li>
  <li>React</li>
  <li>Crazy Developers</li>  
  <li>Web</li>
  <li>React</li>
  <li class="full-width">Sofware Development</li>
</ul>

jsFiddle