Чтобы создать сетку из идеальных квадратов 3 x 3 на веб-странице с помощью flexbox, вы можете использовать несколько подходов. Вот несколько методов с примерами кода:

1. Метод 1: использование Flexbox одинаковой ширины

HTML:

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

CSS:

.grid-container {
  display: flex;
  flex-wrap: wrap;
  width: 300px; /* Adjust the width as per your requirements */
}
.grid-item {
  flex-basis: calc(33.33% - 10px); /* Adjust the percentage and margin as per your requirements */
  height: 0;
  padding-bottom: calc(33.33% - 10px);
  margin: 5px;
  background-color: #ccc; /* Adjust the background color as per your requirements */
}

2. Метод 2: использование CSS Grid

HTML:

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px; /* Adjust the gap as per your requirements */
  width: 300px; /* Adjust the width as per your requirements */
}
.grid-item {
  height: 0;
  padding-bottom: 100%;
  background-color: #ccc; /* Adjust the background color as per your requirements */
}

3. Метод 3: использование Flexbox и соотношения сторон

HTML:

<div class="grid-container">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

CSS:

«»;
display: block;
padding-top: 100%;

Это всего лишь несколько примеров того, как можно создать сетку из идеальных квадратов 3 x 3 с помощью flexbox. Вы можете изменить код в соответствии со своими требованиями, например, отрегулировав размер, цвета и поля.