How can I keep elements in different rows to have the same width

May 1, 2023

I want the div elements on first row (deepskyblue color) to align exactly below the div elements on second row (deepskyblue color), please provide me a solution how to align and the concept.

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>

>Solution :

If what you are trying to achieve is to always have 5 elements at the first row and 5 elements at the second row, where the width of elements on the top and bottom always have the same width, then you can use CSS Grid instead.

Flex is intended to be used to align along 1 axis / dimension only whereas Grid can be used to align across 2 axis / dimensions.

In the example below, I have used grid-template-columns CSS property to make the top and bottom fit to at least the min-width of the child

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: auto auto auto auto auto;
  background-color: green;
  width: 600px;
}
.my_flexx div {
  background-color: deepskyblue;
  margin: 8px;
  padding: 6px;
  font-size: 14px;
}