如果你想实现的是在第一行总是有5个元素，在第二行总是有5个元素，其中顶部和底部的元素的宽度总是相同的，那么你可以使用CSS Grid。
Flex预期仅用于沿着1个轴/维度对齐，而Grid可用于跨2个轴/维度对齐。
在下面的示例中，我使用grid-template-columns CSS property使顶部和底部至少适合子对象的min-width

document.addEventListener('DOMContentLoaded', () => {
  let arrayOfUrls =
    '{"https://create-react-app.dev/docs/getting-started":"React Start",\
    "https://scrimba.com/learn/learnreact/first-react-coc0845dcb1a26cb0769a2fea":"React training",\
    "https://www.digitalocean.com/community/tutorials":"Digital Ocean Tutorials",\
    "./page1.html":"NextPage",\
    "./img/flipcard.html":"Flipcard",\
    "./subscribe.html":"subscribe",\
    "./react.html":"React stuff",\
    "https://www.joshwcomeau.com/react/common-beginner-mistakes/":"React Beginner mistakes",\
    "./futureuse.2html":"future use",\
    "https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#using_addeventlistener":"event listeners"\
    }';

  const obj = JSON.parse(arrayOfUrls);

  for (let key in obj) {
    elem = document.createElement('div');
    elem.setAttribute('id', obj[key]);
    console.log(elem);
    elem.innerHTML = `<a href=${key}>${obj[key]}</a>`;
    document.querySelector('.my_flexx').append(elem);
  }
});

.my_flexx {
  display: grid;
  grid-template-columns: repeat(5, auto);
  background-color: green;
  width: 600px;
}
.my_flexx div {
  background-color: deepskyblue;
  margin: 8px;
  padding: 6px;
  font-size: 14px;
}

<div class="my_flexx"></div>

要将第一行div元素（使用deepskyblue背景色）精确对齐到第二行的下方，可以将align-self: flex-start属性添加到第一行中的div元素。这将使第一行元素与其Flex容器的顶部对齐。下面是更新后的CSS代码：

.my_flexx {
  display: flex;
  background-color: green;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 600px;
}

.my_flexx div {
  background-color: deepskyblue;
  margin: 8px;
  padding: 6px;
  font-size: 14px;
}

.my_flexx div:nth-child(-n+3) {
  align-self: flex-start;
}

在这段代码中，nth-child(-n+3)选择器针对前三个div元素（位于第一行），并对它们应用align-self: flex-start属性。这将使它们与容器的顶部对齐。
注意：您应该将my_flexx类添加到HTML元素中，如div，而不是代码中所示的h1元素。