Flex не выравнивает по вертикали

@trofey2 · Регистрация: 28.12.2015

Студворк — интернет-сервис помощи студентам

есть такой код

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/src/style.css" />
    <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap" rel="stylesheet">
    <title>Star Rating Component - FrontendPro Challenge</title>
    <style>
      * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;  
        }
      body {
        background-color: #E2E8F0;
      }
      .box {
        width: 775px;
        height: 421px;
        border-radius: 16px;
        position: absolute;
        transform: translate(50%, -50%);
        top: 50%;
        right: 50%;
        background-color: #FFFFFF;
        box-shadow: 15px 15px 10px 0 rgb(231, 231, 231);
        display: flex;
        flex-direction: column;
        align-content: space-between;
        border: 1px solid #000000;
      }
      .h1-box {
       display: flex;
       justify-items: center; 
       align-items: center;
       margin-left: auto;
       margin-right: auto;
      }
      .h1-box h1 {
        font: 700 24px "Merriweather", serif;
        color: #000000;
        background-color: #FFFFFF;
        
      }
      .stars-box {
        width: 548px;
        height: 88px;
        border: 1px solid #000000;
        display: flex;
        justify-content: space-between;
        margin-left: auto;
        margin-right: auto;
      }
      .box p {
        font: 200 18px "Merriweather", serif;
        text-align: center;
        margin-left: auto;
       margin-right: auto;
        width: 647px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="h1-box">
        <h1>How many stars would you give to our
        Online Code Editor?
        </h1>
        </div>
      
        <div class="stars-box">
          <img src="design/Vector.png" alt="star">
          <img src="design/Vector.png" alt="star">
          <img src="design/Vector.png" alt="star">
          <img src="design/Vector.png" alt="star">
          <img src="design/Vector.png" alt="star">
        </div>
          <p>Thank you for your feedback. We're sorry to hear that your experience wasn't perfect. We would love to hear more about your concerns to see how we can improve.</p>
        
    </div>
    <script src="/src/script.js"></script>
  </body>
</html>

вопрос почему в .box не работает align-content: space-between;?
хотелось бы чтобы элементы по вертикали по середине выстроились

@rr33rr · 20.06.2025, 18:35

Сообщение от trofey2

почему в .box не работает align-content: space-between;?
хотелось бы чтобы элементы по вертикали по середине выстроились

align-content управляет распределением пространства между элементами вдоль поперечной оси, justify-content — вдоль главной оси.
У вас главная ось идет по вертикали (см flex-direction: column;) поэтому для выравнивания по середине по вертикали следует использовать justify-content: center;

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.box {
  width: 775px;
  height: 421px;
  border-radius: 16px;
  position: absolute;
  transform: translate(50%, -50%);
  top: 50%;
  right: 50%;
  background-color: #fff;
  box-shadow: 15px 15px 10px 0 rgb(231, 231, 231);
  display: flex;
  flex-direction: column;
  align-content: space-between;
  justify-content: center; /* выровнять по центру */
/* или так (равномерно распределит блоки по вертикали внутри родителя)
  justify-content: space-between;
*/
  border: 1px solid #000;
}

См justify-content

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .