Вертикально расположенные элементы в элементе div (пространство вокруг flexbox не работает ..) - PullRequest
Новая
       15

Вертикально расположенные элементы в элементе div (пространство вокруг flexbox не работает ..)

0 голосов
/ 16 апреля 2019

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

Изображение боковых навигационных элементов с сеткой и правильное форматирование объектов.

Вот соответствующий код (используя grid, который здесь не включен, а также модуль "grid" из Materialise, который дает мне некоторую помощь для форматирования текста и т. Д.): 

.nav-side-wrapper {
  display: flex;
  flex-direction: column;
}

.nav-side {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
}

.side-nav-links {
    border-bottom: 2px solid;
}
<nav class="valign-wrapper nav-side-wrapper">
        <div class="container nav-side">
            <ul class="side-nav-links center-align">
                <li><a href="learning">Learning Hub</a></li>
                <li><a href="resources">Resources</a></li>
                <li><a href="glossary">Glossary</a></li>
            </ul>
            <ul class="center-align side-buts">
                <li><button class="but-test">Click me!</button></li>
                <li><button class="but-test">Click me!</button></li>
                <li><button class="but-test">Click me!</button></li>
            </ul>
        </div>
    </nav>

Я перепробовал все комбинации, удалив помощники valign-wrapper и выравнивание по центру из Materialise, перемещая гибкий код (display, flex-direction, justify-content и т. Д.), Пытаясь, казалось бы, каждую комбинацию между строками иди туда, между .nav-side-wrapper и .nav-side.

Это действительно ставит меня в тупик ... Любая помощь будет принята с благодарностью.

В идеале, я бы хотел, чтобы ссылки располагались вдоль верхней половины навигационной панели, а кнопки равномерно располагались вдоль нижней половины навигационной панели.

Ответы [ 2 ]

0 голосов
/ 16 апреля 2019

попробуйте добавить свой CSS 

.nav-side {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
}
.side-buts{
    display: flex;
    justify-content: space-around;
      flex-direction: column;

}
0 голосов
/ 16 апреля 2019

Решение этой проблемы - установить для свойства flex значение 1 для дочернего элемента flex.Когда это свойство установлено для гибкого элемента, оно сделает все элементы одинаковой длины.Если вы добавите отступы к верхней и нижней части гибкого дочернего элемента, вы можете поиграть с восприятием высоты.Фрагмент показывает, что родительский изгиб имеет высоту 400 пикселей.Вы можете поиграть с высотой, чтобы увидеть, как она сохраняет пространство вокруг.

.nav-side-wrapper {
  height: 400px;
  width: 30%;
  display: flex;
  flex-direction: column;
  background-color: pink;
  justify-content: space-around;
}

.nav-side {
  display: flex;
  -webkit-flex: 1;
  /* Safari 6.1+ */
  -ms-flex: 1;
  /* IE 10 */
  flex: 1;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 10% 0px;
}

hr {
  border: none;
  background-color: black;
  height: 2px;
  width: 90%;
}
<nav class="nav-side-wrapper">
  <div class="nav-side">
    <div><a href="learning">Learning Hub</a></div>
    <div><a href="resources">Resources</a></div>
    <div><a href="glossary">Glossary</a></div>
  </div>
  <div>
    <hr>
  </div>
  <div class="nav-side">
    <div><button class="but-test">Click me!</button></div>
    <div><button class="but-test">Click me!</button></div>
    <div><button class="but-test">Click me!</button></div>
  </div>
</nav>
...