Why are some of my CSS rules not working?

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 5 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.

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Portrait of New York</title>
      <style>
        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>

标签： html css css3 flexbox twitter-bootstrap-4

1条回答

ら.Afraid

2楼-- · 2019-01-07 01:32

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 what you're actually doing is 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.

Why are some of my CSS rules not working?

CSS Commenting: Use /* ... */ not //... or

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间

CSS Commenting: Use `/* ... */` not `//...` or ``