Лучший способ расставить гибкие элементы - PullRequest
0 голосов
/ 22 мая 2018

Я пытаюсь найти лучший способ сделать следующее: я создал множество навигационных ссылок, но когда вы уменьшаете размер экрана, пространство между гибкими элементами иногда может показаться слишком отдаленным, '|»Символы, которые должны находиться между элементами Flex, могут появляться в конце строки, прежде чем элемент Flex перейдет на следующую строку, и (возможно, это мой браузер) элементы Flex, по-видимому, переносятся при расширении браузера после его сжатия (т. е.текст внутри тегов может быть в отдельных строках.

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

Спасибо

.footer-links {
  display: flex;
  justify-content: space-between;
  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;
}
@media (min-width: 1024px) {
  .footer-links { justify-content: center }
}
<div class='footer-links'>
  <a>Home</a> | <a>Terms &amp; Conditions</a> | <a>Contact Us</a> | <a>Apps</a> | <a>Some Link</a> | <a>Contact Us</a> | <a>Apps</a>
</div>

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

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 &amp; Conditions</a><a>Contact Us</a><a>Apps</a><a>Some Link</a><a>Contact Us</a><a>Apps</a>
</div>

Обратите внимание, в соответствии с документацией, которую я связал выше:

Псевдоэлементы: before и: after наследуют любые наследуемыесвойства элемента в дереве документа, к которому они присоединены.

Таким образом, вам придется соответственно изменить цвет фона в ваших обстоятельствах

0 голосов
/ 22 мая 2018
  • В .footer-links Я добавил flex-direction: row; и удалил

  • Я также заметил ошибку в .footer-links>a:first-child, где он сказал padding-right: 1; without the%`знак.

.footer-links {
  display: flex;
  flex-direction: row; /* added */
  /* justify-content: space-between; */ /* removed */
  flex-wrap: nowrap; /* changed */
  background: pink;
}

.footer-links>a {
  flex-wrap: no-wrap;
  background: orange;
  white-space: nowrap; /* added */
}

.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%; /* added the % */
  background: lightblue;
}

@media (min-width: 1024px) {
  .footer-links {
    justify-content: center
  }
}
<div class='footer-links'>
  <a>Home</a> | <a>Terms &amp; Conditions</a> | <a>Contact Us</a> | <a>Apps</a> | <a>Some Link</a> | <a>Contact Us</a> | <a>Apps</a>
</div>

Также, пожалуйста, рассмотрите некоторые изменения, которые я сделал, что делает ваш дизайн намного приятнее.Делай с этим, как пожелаешь:)

JSFiddle demo

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...