Flexbox с неупорядоченным списком

Я пытаюсь выучить flexbox, и мне это очень нравится. Я пытаюсь играть с динамической шириной, и когда я делаю это с divs, это работает. Если я попытаюсь сделать это с помощью li, это не сработает. Мой код на codepen.

div.example
  ul
    li
      | 1
    li
      | 2
    li
      | 3
    li
      | 4
    li
      | 5
    li
      | 6

div.container
  div.col
    | 1
  div.col
    | 2
  div.col
    | 3
  div.col
    | 4
  div.col
    | 5
  div.col
    | 6

Код SASS

.container {
  border: 1px solid #000;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 50%;

  .col {
    width: calc(100% / 3);
    height: 120px;
    text-align: center;
  }
}

.example {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 50%;
  border: 1px solid #000;
  margin: 1em 0;

  ul {
    width: 100%;
    padding-left: 0;
  }

  li {
    list-style: none;
    display: inline-block;
    width: calc(100% / 3);
    height: 120px;
    text-align: center;
  }
}

Ответы

Ответ 1

Вам необходимо применить свойства flex к <ul>

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

Помещение свойств в <div> говорит ему, чтобы он отображал <ul> в flex, а не <li>.

Ответ 2

На основе вашей разметки обратите внимание, что элементы <li> являются дочерними элементами <ul>, а не элементом деления .example.

<div class="example">
  <ul>
    <li>1</li>
  </ul>
</div>

Поскольку непосредственным родителем элементов <li> являются <ul>, используйте свойства flex в <ul>, которые обертывают несколько элементов <li> вместо внешнего элемента <div>:

.example {
  width: 50%;
  border: 1px solid #000;
  margin: 1em 0;

  ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding-left: 0;
  }

  li {
    list-style: none;
    display: inline-block;
    width: calc(100% / 3);
    height: 120px;
    text-align: center;
  }
}

http://codepen.io/anon/pen/NGPBbg

Ответ 3

У меня та же проблема... независимо от того, что я делаю, элементы списка смешиваются вместе...

<!DOCTYPE html>
<html>
<head>
</head>
  <header id="header">
    <div id="nav-container">
    <nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#Beginner">Beginner</a></li>
<li><a class="nav-link" href="#Intermediate">Intermediate</a></li>
<li><a class="nav-link" href="#Advanced">Advanced</a></li>
</ul>
</nav>
    </div>
  </header>
<body>
</body>
    </div>
</html>

Это мой код CSS:

#nav-container{
  height: auto;
  width: 1000px;
  background-color: lightblue;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
}

nav ul{
  display:flex;
  justify-content: space-between;
  flex: auto;
}

#header{
    position:fixed;
}

https://codepen.io/sidneyyin/pen/rgzJrP