Контент Flexbox не распространяется равномерно со ссылками и изображениями - PullRequest
Новая
       9

Контент Flexbox не распространяется равномерно со ссылками и изображениями

0 голосов
/ 31 октября 2018

Я использую flex для создания нижнего колонтитула. Я хочу, чтобы нижний колонтитул занимал 60% от ширины сайта и располагался по центру, что прекрасно работает. Когда я добавляю контент в нижний колонтитул текста, ссылок и ссылок на изображения и пытаюсь выравнивать пространство равномерно, он не работает должным образом, и в нижнем колонтитуле с правой стороны появляется много лишних пробелов. Как мне это удалить?

Нижний колонтитул

CSS 

    .site-wide-footer {
    display: flex;
    flex-wrap: wrap;
    width: 60%;
    height: auto;
    border: 2px solid black;
    border-radius: 24px;
    color: white;
    background-color: black;
    margin: auto;
    justify-content: space-between;
    align-items: center;
}

HTML 

<footer>
 <div class="site-wide-footer">
   <p>&copy; 2018 copyright</p>
   <p><a href="store.html" class="button-footer"> &diams;STORE</a></p>
   <p><a href="about-us.html" class="button-footer">&diams;ABOUT US</a></p>
   <p><a href="sitemap.xml" class="button-footer">&diams;SITEMAP</a></p>
  <div class="social-footer">
   <p><a href="discord url">
   <img src="images/Discord-Logo-White.png" alt="Discord Logo" 
   class="discord-footer" onmouseover="hover(this);" 
   onmouseout="unhover(this);"></a>
   <a href="facebook url/"><img 
   src="images/facebook-icon.png" alt="Facebook Icon" class="facebook- 
   footer"></a></p>
  </div>  
 </div>
</footer>

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

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

.site-wide-footer {
    display: flex;
    flex-wrap: wrap;
    width: 60%;
    height: auto;
    border: 2px solid black;
    border-radius: 24px;
    color: white;
    background-color: black;
    margin: auto;
    justify-content: space-around; /*you can play with it*/
    align-items: center;
    padding: 0 15px 0; /*fixed space on left and right of the flex-box*/
}
.site-wide-footer > { /*flex-box children */
    flex: 1 0; /*play with this one a bit. you could also give it a minimum width like that:  flex: 1 0 100px;*/
}`

И, конечно, вы можете найти все ответы на это Полное руководство по Flexbox

Итамар

0 голосов
/ 31 октября 2018

Как насчет использования justify-content: space-evenly; вместо этого? Это также обеспечит центрирование дочерних элементов, даже если оно перенесено на следующую строку.

...