我想在第一行的div元素(deepskyblue
颜色),以第二行的div元素(deepskyblue
颜色)下面对齐,请提供我一个解决方案如何对齐和概念。
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: 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;
}
<h1 class="my_flexx"></h1>
2条答案
按热度按时间jv2fixgn1#
如果你想实现的是在第一行总是有5个元素,在第二行总是有5个元素,其中顶部和底部的元素的宽度总是相同的,那么你可以使用CSS Grid。
Flex预期仅用于沿着1个轴/维度对齐,而Grid可用于跨2个轴/维度对齐。
在下面的示例中,我使用
grid-template-columns
CSS property使顶部和底部至少适合子对象的min-width
kdfy810k2#
要将第一行
div
元素(使用deepskyblue
背景色)精确对齐到第二行的下方,可以将align-self: flex-start
属性添加到第一行中的div
元素。这将使第一行元素与其Flex容器的顶部对齐。下面是更新后的CSS代码:在这段代码中,
nth-child(-n+3)
选择器针对前三个div
元素(位于第一行),并对它们应用align-self: flex-start
属性。这将使它们与容器的顶部对齐。注意:您应该将
my_flexx
类添加到HTML元素中,如div
,而不是代码中所示的h1
元素。