我有一个嵌套的Flexbox布局（使用引导程序v4) 根据横向/纵向模式改变方向。第一级div（由 Flexbox 使用order财产），#no，包含五个用作按钮的图标。这order属性在这些图标上无法按我的预期工作。
如果我不使用order属性，图标按自然顺序排列；但是，如果我尝试使用order财产来布置它们，这是行不通的。在the code, the info-div (order:3) 应该是最后一个元素。事实并非如此。我可以通过更改源中的顺序来获得我想要的顺序；不过，我想澄清一下我的误解。
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>
CSS 注释：使用/* ... */, not //... or <!-- ... -->
您遇到的问题与您的弹性代码无关。
问题是你正在使用行注释语法用于注释文本，这不是有效的 CSS。
button:ACTIVE { // feedback on touch modal
background: aqua;
}
// next is for images
.img { width: 8vmin; }
因此，您实际上发布了无效代码，该代码不是注释掉该行，而是调用 CSS 错误处理，这会杀死下一条规则。换句话说，任何遵循你的规则// text text text被忽略，就像您执行了以下操作一样：xheight: 50px.
这就是为什么order不适用于您的图标：
// stuff living in #no
#info-div1 {
order: 3;
-webkit-order: 3;
}
坚持标准的 CSS 注释方法。开始评论/*。结束评论*/.
/* stuff to be commented out */
一旦您对代码进行了调整，order属性工作正常（并且，正如您所期望的，会发生由先前忽略的代码引起的其他更改）。查看修改后的演示.
在这里阅读有关 CSS 注释的更多信息：
-
4. 语法和基本数据类型 > 第 4.1.9 节注释 ~ W3C
- 用 // 注释掉单行 CSS 是不是不好的做法？
- 双正斜杠是否会指示 IE 使用特定的 CSS？
-
单行评论（//) in CSS~ Tab Atkins, Jr.，CSS 工作组
最后，单独说明一下：
您正在放置供应商前缀代码after标准无前缀版本。
#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;
}
你应该考虑扭转这一局面。无前缀 (W3C) 版本应该放在最后，因此它始终是级联中的首选版本。阅读更多.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
