Для раздела навигации я хочу использовать выравнивание space-between. Для небольших дисплеев, где навигация может потребоваться обернуть, я бы хотел, чтобы элементы располагались по центру, а не прилипали влево, когда один в ряду.

nav {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
  justify-content: space-between;
}
<nav>
  <div class='item'>
    Item 1 is alone on its row if the window is small, but is not centered.
  </div>
  <div class='item'>
    Item 2 is very much like item 1.
  </div>
</nav>

Демонстрация Codepen: https://codepen.io/anon / ручка / MmdOMP ? редакторы = 1100 # 0

11
Jakob 28 Май 2017 в 21:12

2 ответа

Лучший ответ

С моей точки зрения может быть 2 решения:

  1. Используйте CSS медиа запросы или;
  2. Решение JS, объяснено ниже:

Когда элемент обернут, он занимает 100% ширины, вам нужно проверить событие изменения размера окна шириной элемента, и если он равен 100% относительно родительского элемента, что означает, что он обернут, вы можете добавить класс в этот момент и удалите его, когда утверждение ложно:

function justifyCenter() {
    var navWidth = $("nav").width();
    var itemWidth = $(".item:first-child").width();

    if (navWidth === itemWidth ) {
        $("nav").addClass('justify-center');
    } else {
        $("nav").removeClass('justify-center');
    }
}

Демонстрация Codepen: https://codepen.io/anon/pen/WzgpLw

2
Ursu Alexandr 4 Апр 2018 в 19:49

Комментарий LGSon имеет для меня смысл, но предположительно OP хочет иметь возможность изменять динамический текст, который может или не может поместиться в контейнере, независимо от конфигурации Flexbox или медиа-запроса.

Посмотрите на JS, который обнаруживает перенос строк, а затем запускает действие (например, центрирует текст).

Например: https://github.com/xdamman/js-line-wrap-detector

Или JS, который автоматически изменяет размер текста, чтобы поместиться в контейнер. Бесполезно для любых ситуаций.

Например: http://www.fittextjs.com

0
MarsAndBack 12 Янв 2018 в 00:20