flexbox работает так, как вы сказали ему работать.Здорово, когда нас слушают роботы!
Ваш отклик в медиа-запросе гласит, что в любое время до ширины 1024 пикселя оправдывается только содержимое space-between
, так как это значение, установленное в родительском классе и его унаследованном.Если вы хотите, чтобы они были ближе, просто удалите этот медиазапрос для 1240px +, чтобы он применялся ко всем значениям ширины, измените свойство justify-content
в классе footer-links на center, и он будет вести себя соответствующим образом.
Наскольков качестве символа канала (|
), если вы не хотите, чтобы он разбивал строки до того, как его родной брат, то не делайте его родным братом и включайте его вместе с родным братом:
From:
<a>Home</a> |
Кому:
<a>Home |</a>
или еще лучше, используйте :after
||:before
классы psuedo, так как этот предназначен для использования по назначению и является встроенным по умолчанию.Или, может быть, реструктурировать свой код, который имеет больше смысла, когда вы используете тег <li>
с дочерними элементами для отображения списка вещей по вашему усмотрению, так что тогда он не является дочерним по отношению к родительскому элементу div (footer-links) и становится дочерним.родительского элемента списка.Здесь много возможностей для успеха, в основном произвольно от того, что вы решите, но вы должны действительно подумать о структурировании своего кода, по многим причинам, таким как доступность.Программы чтения с экрана не будут знать, что ваш класс нижних колонтитулов является элементом навигации по тому, как он написан.
Ради ответа на вопрос, вот пример с классом psuedo и выравниванием по центру:
.footer-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
background: pink;
}
.footer-links>a {
flex-wrap: nowrap;
background: orange;
}
.footer-links>a:nth-child(n+2) {
padding: 0 1%;
background: lightgreen;
}
.footer-links>a:last-child {
padding-right: 0;
background: red;
}
.footer-links>a:first-child {
padding-right: 1;
background: lightblue;
}
/* new change, removed media query and added :after psuedo class for pipes*/
.footer-links a:not(:last-child):after {
content: "|";
background: pink;
padding: 0 5px;
}
<div class='footer-links'>
<a>Home</a><a>Terms & Conditions</a><a>Contact Us</a><a>Apps</a><a>Some Link</a><a>Contact Us</a><a>Apps</a>
</div>
Обратите внимание, в соответствии с документацией, которую я связал выше:
Псевдоэлементы: before и: after наследуют любые наследуемыесвойства элемента в дереве документа, к которому они присоединены.
Таким образом, вам придется соответственно изменить цвет фона в ваших обстоятельствах