Блог

Главная - Вопросы по программированию - проблема с отображением felx при изменении размера страницы

проблема с отображением felx при изменении размера страницы

#html #css

#HTML #css

Вопрос:

Привет всем, я написал этот код в HTML:

 .wrapper2{
    display: flex;
    justify-content: space-between;
    padding:20px;
    background: #1f3138;
    color: white;
}
.wrapper2 h2{
    text-transform: uppercase;
}
.wrapper2 a{
    text-decoration: none;
    color: white;
}
.p2{
    margin-top: -1em;
}
.wrapper2 i{
    padding-right: 10px;
} 
 <div class="wrapper2">
  <h2 class="footer"> <a href="#"> Content <br><p>Lorem, ipsum.</p><br><p class="p2">Lorem, ipsum.</p></a></h2>
  <h2 class="footer"><a href="#"> information <br><p>Lorem, ipsum.</p><br><p class="p2">Lorem, ipsum.</p></a></h2>
  <h2 class="footer"><a href="#"> legal <br><p>Lorem, ipsum.</p><br><p class="p2">Lorem ipsum dolor sit amet.</p></a></h2>
  <h2 class="footer"><a href="#"> help <br><p>Lorem, ipsum.</p><br><p class="p2">Lorem, ipsum.</p></a></h2>
  <h2 class="footer"><i class="fas fa-phone-alt"></i>3-6000-0000
  -6000-000-0000</h2>
  <h2 class="footer6"><i class="fas fa-map-marker-alt"></i>67700 Dagenham St
  England, GB</h2>
</div>

Я заставил его отображать flex при изменении размера страницы шириной менее 1920 пикселей, когда h2 приближается друг к другу, и это не создает пробел между ними, может кто-нибудь помочь, пожалуйста.

Ответ №1:

Пространство между элементами flex распределяется соответствующим образом, поэтому, когда размер экрана становится меньше, пространство между элементами становится меньше.

Попробуйте использовать свойство gap для родительского элемента flex (если позволяет поддержка вашего браузера) или margin left / right для элементов, чтобы увеличить интервал даже при меньших размерах экрана.

Комментарии:

1. большое вам спасибо, что очень помогло, я отредактировал поле, и оно просыпается