3

Есть следующий макет: введите сюда описание изображения

Сверстано так: введите сюда описание изображения

.block3_header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 87px;
}

.block3_header span {
  font-family: 'Gilroy-Bold';
  font-size: 34px;
  line-height: 42px;
  text-align: center;
  color: #070707;
}

.block3_subText {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 55px;
}

.block3_subText span {
  font-family: 'Gilroy-Medium';
  font-size: 18px;
  line-height: 22px;
  text-align: center;
  color: #070707;
}

.container_skills {
  margin-top: 80px;
}

.block3_skills {
  display: flex;
  align-content: flex-end;
  justify-content: space-evenly;
  align-items: flex-start;
}

.block3_skill {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.block3_stars {
  display: flex;
}

.block3_stars img {
  margin-right: 9px;
}

.block3_stars:last-child {
  margin-right: 0;
}

.block3_subTitle {
  display: flex;
  margin-top: 24px;
  margin-bottom: 42px;
}

.block3_subTitle span {
  font-family: 'Gilroy-Bold';
  font-size: 14px;
  line-height: 17px;
  text-align: center;
  color: #828282;
}
<div class="container container_skills">
  <div class="block3_skills">
    <div class="block3_skill">
      <div class="block3_logo">
        <img src="/img/PS.svg" alt="Photoshop">
      </div>
      <div class="block3_subTitle">
        <span>
                                Adobe<br>Photoshop
                            </span>
      </div>
      <div class="block3_stars">
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/StarWithoutFill.svg" alt="">
      </div>
    </div>
    <div class="block3_skill">
      <div class="block3_logo">
        <img src="/img/AI.svg" alt="Adobe Illustrator">
      </div>
      <div class="block3_subTitle">
        <span>
                                Adobe<br>Illustrator
                            </span>
      </div>
      <div class="block3_stars">
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/StarWithoutFill.svg" alt="">
        <img src="/img/StarWithoutFill.svg" alt="">
      </div>
    </div>
    <div class="block3_skill">
      <div class="block3_logo">
        <img src="/img/AE.svg" alt="Adobe After Effects">
      </div>
      <div class="block3_subTitle">
        <span>
                                Adobe<br>After Effects
                            </span>
      </div>
      <div class="block3_stars">
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/StarWithoutFill.svg" alt="">
      </div>
    </div>
    <div class="block3_skill">
      <div class="block3_logo">
        <img src="/img/Figma.svg" alt="Figma">
      </div>
      <div class="block3_subTitle">
        <span>
                                Figma<br><br>
                            </span>
      </div>
      <div class="block3_stars">
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/Star.svg" alt="">
        <img src="/img/StarWithoutFill.svg" alt="">
      </div>
    </div>
  </div>
</div>

Проблема заключается в то, что по макету карточки с программами находятся ближе друг к другу, чем по факту у меня получились. Есть вариант во флексах как-то уменьшить отступ между блоками?

5
  • 4
    Вы можете блоку-обёртке .block3_skills задать justify-content: center; (вместо space-evenly как у Вас сейчас). А расстояние между внутренними блоками уже регулировать с помощью margin 4 фев 2022 в 8:48
  • 1
    Спасибо большое). Сработало
    – Meekwest
    4 фев 2022 в 8:56
  • 5
    @humster_spb Не обязательно использовать margin для корректировки отступов, gap справится лучше, отступы будут только между flex элементами, у крайних элементов внешних отступов не будет.
    – Pilaton
    4 фев 2022 в 11:55
  • @Pilaton, или так ) Но в данном примере не принципиально 4 фев 2022 в 12:47
  • @Pilaton, как альтернитива для gap - [tag_name]:not(:last-child) {}
    – Iurii
    8 мая 2022 в 12:27

1 ответ 1

2
display:flex;
justify-content: center; // Контент по центру
flex-wrap: nowrap;
align-items: center;
grid-gap:20px; // отступы между flex элементами

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.