应用显示的区别：flex到外部容器和子项

Question

我对应用display：flex到整个容器和该容器的项目之间的区别感到困惑。

从我的实验中，我知道它会导致不同的布局。但为什么这会导致不同的布局？以及如何决定不同的布局？

如果应用于整个容器，

如果应用于菜单中的子项目，

代码，

＆＃13;

＆＃13;

.advanced-nav ul {
  /* display: flex;*/
  /*change me!*/
}

.advanced-nav li a {
  display: flex;
  /*or change me!*/
  width: 100%;
  /* justify-content: flex-start;*/
}

＆＃13;

<section class="menu-section">
  <h2 class="menu-heading">Advanced Menu</h2>
  <nav id="advanced-nav" class="advanced-nav menu" role="navigation">
    <ul>
      <li>
        <a href="#">
          <div class="icon">
            <i class="fa fa-home"></i>
          </div>
          <div class="button-text">
            Home
            <span>is where the heart is</span>
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="icon">
            <i class="fa fa-cutlery"></i>
          </div>
          <div class="button-text">
            Food
            <span>is nourishment for the soul</span>
          </div>
        </a>
      </li>

      <li>
        <a href="#">
          <div class="icon">
            <i class="fa fa-file-text"></i>
          </div>
          <div class="button-text">
            Recipes
            <span>guide you on your journey</span>
          </div>
        </a>
      </li>
      <li>
        <a href="#">
          <div class="icon">
            <i class="fa fa-paper-plane"></i>
          </div>
          <div class="button-text">
            News
            <span>brings new things</span>
          </div>
        </a>
      </li>
    </ul>
  </nav>
  <!-- #advanced-nav .advanced-nav -->
</section>
<!-- .menu-section -->

＆＃13;

＆＃13;

＆＃13;

使用上面的代码，虽然大多数css样式都被剥离，但差异仍然存在。任何反馈都表示赞赏;感谢。

Answer 1

添加此css

for(let i = 0; i < data.length; i++) {
  let divs = document.createElement('div');
  divs.setAttribute("id", "btn_id");
  divs.setAttribute("class", "btn_class");
  divs.setAttribute("data-id", (data[i]).id);
  document.body.appendChild(divs);
}