1

I am confused by what the difference is between apply display:flex to a whole container and to an item of that container.

From my experiment, I know that it causes different layout. But why does this cause different layout? And how the different layouts are decided?

if applied to the whole container, enter image description here

if applied to subitem in the menu,

enter image description here

code,

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

.advanced-nav li a {
  display: flex;
  /*or change me!*/
  width: 100%;
  /* justify-content: flex-start;*/
}
<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 -->

with code above, although most of css styles are stripped, difference still exists. Any feedback is appreciated; thanks.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Yu Fang
  • 520
  • 5
  • 17
  • This ***[link](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes)*** can help you. – Abhishek Pandey Mar 16 '17 at 07:10

1 Answers1

-1

Add this css

.advanced-nav ul li {
     display: inline-block;
     width: 100%;
}
.advanced-nav ul li a {
     display: inline-block;
     width: auto;
}

.advanced-nav ul li a .icon {
     display: inline-block;
     width: auto;
}

.advanced-nav ul li a .button-text {
     display: inline-block;
     width: auto;
}
Navneet vaghasiya
  • 117
  • 1
  • 2
  • 7