Почему display: flex сжимает всю секцию?

Question

[TheDifferentGuy]

У меня такой вопрос, не подскажете почему display: flex сжимает всю секцию? А мне фактически нужно, чтобы мой блок с иконками был justify-content: space-between, но flex почему то это всё сжимает.

<section id="skills" class="page__skills skills">
         <div class="skills__content _container">
            <div class="skills__body">
               <div class="skills__description">
                  <div class="skills__title">
                     <p>Skills</p>
                  </div>
                  <div class="skills__mixing">
                     <p>I work in such programs as:</p>
                  </div>
               </div>
               <div class="skills__programs-colums">
                  <div class="skills__photoshop">
                     <div class="img">
                        <img src="img/Photoshop_icon.png" alt="">
                     </div>
                     <div class="title">
                        <p>Adobe <br>
                           Photoshop</p>
                     </div>
                     <div class="stars">
                        <div class="first__star">
                           <img src="img/Star.png" alt="">
                        </div>
                        <div class="second__star">
                           <img src="img/Star.png" alt="">
                        </div>
                        <div class="third__star">
                           <img src="img/Star.png" alt="">
                        </div>
                        <div class="fourth__star">
                           <img src="img/Star.png" alt="">
                        </div>
                        <div class="fifth__star">
                           <img src="img/Star-1.png" alt="">
                        </div>
                     </div>
                  </div>
                  <div class="skills__illustrator">
                     <div class="img">
                        <img src="img/Illustrator_icon.png" alt="">
                     </div>
                     <div class="title">
                        <p>Adobe <br>
                           Illustrator</p>
                     </div>
                     <div class="stars"></div>
                  </div>
                  <div class="skills__after-effects">
                     <div class="img">
                        <img src="img/After_Effects_icon.png" alt="">
                     </div>
                     <div class="title">
                        <p>Adobe <br>
                           After Effects</p>
                     </div>
                     <div class="stars"></div>
                  </div>
                  <div class="skills__figma">
                     <div class="img">
                        <img src="img/figma_icon.png" alt="">
                     </div>
                     <div class="title">
                        <p>Figma</p>
                     </div>
                     <div class="stars"></div>
                  </div>
               </div>
            </div>   
         </div>
      </section>

.skills {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  margin: 40px 0 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  text-align: center;
}

.skills__content {
  max-width: 956px;
  padding: 0px 10px;
}

.skills__title {
  font-size: 34px;
  line-height: 42px;
}

.skills__mixing {
  font-size: 18px;
  line-height: 22px;
}

.skills__programs-colums {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.skills__programs-colums .img {
  width: 89px;
  height: 88px;
}

Comments

[Ankhena]

В вашем коде вообще нет space-between
Так что не понятно, с чего бы оно стало работать как вы хотите.

Сделайте песочницу с видимой проблемой на codepen.io
В качестве заглушек для картинок можно взять любые из яндекс.картинок или с помощью сервисов типа https://picsum.photos/. А можно просто сделать квадратики с фоном.

[TheDifferentGuy]

Ankhena, я поставил и всё равно ничего не сработало

https://codepen.io/thedifferentguy/pen/GRdpOar

[Ankhena]

TheDifferentGuy, обведите skills__programs-colums рамочкой и увидите, что в нем просто нет места для space-between. Собственно, там вообще нет свободного места, которое можно было бы распределять. Т.е. любой вариант justify-content приведет к одинаковому результату.

Думаю, начать имеет смысл с самого начала: зачем флекс для .skills
Именно он заставляет своего единственного ребенка skills__content сжиматься по контенту.

[TheDifferentGuy]

Ankhena, может быть, но у меня есть блок сверху, который масштабируется как надо и ничего не сжимает

[Ankhena]

TheDifferentGuy, я не знаю, какие у него стили и почему он ведет себя не так, как этот.
Вариантов почему так может быть вагон, играть в угадайку лень.

Хотите разобраться и не можете сами найти различия, делайте песочницу с обоими блоками, будем смотреть вместе.

Удобный для новичков способ понять что происходит - обвести все блоки рамочками (полупрозрачный outline и отрицательный outline-offset)