1

I have a nested Flexbox layout (using Bootstrap v4) which changes orientation according to landscape / portrait mode. A first level div (which is placed by Flexbox using the order property), #no, holds five icons which serve as buttons. The order property doesn't work as I expect on these icons.

If I don't use an order property, the icons are laid out in the natural order; however, if I try to use the order property to lay them out, it doesn't work. In the code, the info-div (order:3) should be the last element. It isn't. I can get the order I want by changing order in the source; however, I would like to clarify my misunderstanding.

html,
body {
  width: 100%;
  height: 100%;
}

#container {
  height: 100%;
  width: 100%;
  display: flex;
  display: -webkit-flex;
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
  align-content: space-between;
  -webkit-align-content: space-between;
}

#no {
  padding: 1rem;
  display: flex;
  display: -webkit-flex;
  flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  justify-content: space-between;
  -webkit-justify-content: space-between;
  align-items: center;
  -webkit-align-items: center;
  align-content: space-between;
  -webkit-align-content: space-between;
  flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
}

.icon {
  margin: auto;
  flex-grow: 1;
  flex-basis: auto;
}

button:ACTIVE {
  // feedback on touch modal
  background: aqua;
}

// next is for images
.img {
  width: 8vmin;
}

// stuff living in #no
#info-div1 {
  order: 3;
  -webkit-order: 3;
}

#minus {
  order: 0;
  -webkit-order: 0;
}

#hb2 {
  order: -1;
  -webkit-order: -1;
}

#plus {
  order: 1;
  -webkit-order: 1;
}

#comment-button-div {
  order: 2;
  -webkit-order: 2;
}

@media screen and (orientation: landscape) {
  #container {
    flex-direction: row;
    -webkit-flex-direction: row;
  }
  #no {
    flex-direction: column;
    -webkit-flex-direction: column;
    height: 100%;
    max-width: 10rem;
    order: 0;
    -webkit-order: 0;
  }
}

@media screen and (orientation: portrait) {
  #container {
    flex-direction: column;
    -webkit-flex-direction: column;
  }
  #no {
    flex-direction: row;
    -webkit-flex-direction: row;
    max-height: 10rem;
    width: 100%;
    order: 2;
    -webkit-order: 2;
  }
}

</style><script src="https://www.google.com/recaptcha/api.js" async defer></script></head><body><div id="container"><div id='no'><div id='minus' class="icon" title="Not special."><a href="#" id="nHeart"><img class="img icon" src="http://gps-photo.org/images/Not.svg"/></a></div><div id="hb2" title="Login/Register/Uploads/Settings" class="btn-group icon"><div class="dropdown"><img class="dropdown-toggle img" src="http://gps-photo.org/images/cogwheel-525702-1.svg" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"/><div class="dropdown-menu"><a class="dropdown-item clr" data-toggle="modal" href="#myModal"></a><a class="dropdown-item cup" data-toggle="modal" href="#myModal"></a><a class="dropdown-item cmore" data-toggle="modal" href="#myModal"></a><a class="dropdown-item cpony" data-toggle="modal" href="#myModal"></a><a class="dropdown-item cabout" data-toggle="modal" href="#myModal"></a></div></div></div><!-- end hb2 --><div id='plus' class="icon" title="Loving it!"><a href="#" id="heart1"><img class="img" src="http://gps-photo.org/images/red-304570-1.svg"/></a></div><div id='comment-button-div' class="icon" title="Click for comments"><a class="comment-page" data-toggle="modal"><img class="img" id='comment-button' src="http://gps-photo.org/images/comments-97860-3.svg"/></a></div><div id='info-div1' class="icon" title='Information'><a class="info-page" data-toggle="modal"><img id="info1" class="img" src="http://gps-photo.org/images/information-39064-2.svg"/></a></div></div></div><!-- jQuery first,
then Bootstrap JS. --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script></body></html>
<link href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div id="container">
  <div id='no'>

    <div id='minus' class="icon" title="Not special.">
      <a href="#" id="nHeart">
        <img class="img icon" src="http://gps-photo.org/images/Not.svg" />
      </a>
    </div>

    <div id="hb2" title="Login/Register/Uploads/Settings" class="btn-group icon">
      <div class="dropdown">
        <img class="dropdown-toggle img" src="http://gps-photo.org/images/cogwheel-525702-1.svg" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" />
        <div class="dropdown-menu">
          <a class="dropdown-item clr" data-toggle="modal" href="#myModal"></a>
          <a class="dropdown-item cup" data-toggle="modal" href="#myModal"></a>
          <a class="dropdown-item cmore" data-toggle="modal" href="#myModal">
          </a>
          <a class="dropdown-item cpony" data-toggle="modal" href="#myModal">
          </a>
          <a class="dropdown-item cabout" data-toggle="modal" href="#myModal"></a>
        </div>
      </div>
    </div>
    <!-- end hb2 -->
    <div id='plus' class="icon" title="Loving it!">
      <a href="#" id="heart1">
        <img class="img" src="http://gps-photo.org/images/red-304570-1.svg" />
      </a>
    </div>

    <div id='comment-button-div' class="icon" title="Click for comments">
      <a class="comment-page" data-toggle="modal">
        <img class="img" id='comment-button' src="http://gps-photo.org/images/comments-97860-3.svg" />
      </a>
    </div>

    <div id='info-div1' class="icon" title='Information'>
      <a class="info-page" data-toggle="modal">
        <img id="info1" class="img" src="http://gps-photo.org/images/information-39064-2.svg" />
      </a>
    </div>

  </div>
</div>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
LenB
  • 1,126
  • 2
  • 14
  • 31

1 Answers1

5

CSS Commenting: Use /* ... */, not //... or <!-- ... -->

The problem you're having is not related to your flex code.

The problem is you're using line comment syntax for commenting out text, and this is not valid CSS.

button:ACTIVE { // feedback on touch modal
   background: aqua;
}

// next is for images
.img { width: 8vmin; }

So you're actually posting invalid code which, instead of commenting out the line, is calling CSS error-handling into play, which kills the next rule. In other words, any rule following your // text text text is ignored, just as if you had done this: xheight: 50px.

This is why order is not working for your icon:

// stuff living in #no
#info-div1 {
    order: 3;
    -webkit-order: 3;
}

Stick to the standard CSS commenting method. Start a comment with /*. End a comment with */.

/* stuff to be commented out */

Once you make the adjustments in your code, the order property works fine (and, as you might expect, other changes occur, caused by previously ignored code). See revised demo.

Read more about CSS comments here:

Lastly, on a separate note:

You're placing vendor prefixed code after the standard unprefixed versions.

#container {
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;

    justify-content: center;
    -webkit-justify-content: center;

    align-items: center;
    -webkit-align-items: center;

    align-content: space-between;
    -webkit-align-content: space-between;
}

You should consider reversing this. The unprefixed (W3C) version should go last, so it's always the preferred version in the cascade. Read more.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701