Len*_*enB 1 html css css3 flexbox twitter-bootstrap-4
我有一个嵌套的flexbox布局(使用bootstrap v4),它根据横向/纵向模式改变方向.第一级div(由flexbox使用order属性放置)#no,包含5个用作按钮的图标.该order属性不能像我期望的那样在这些图标上工作.
如果我不使用order属性,图标按自然顺序排列; 但是,如果我尝试使用该order属性进行布局,则不起作用.在代码中,info-div(order:3)应该是最后一个元素.事实并非如此.我可以通过改变源中的顺序来获得我想要的订单; 但是,我想澄清一下我的误解.
<!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>
/* ... */不使用//...或<!-- ... -->您遇到的问题与您的Flex代码无关.
问题是你使用行注释语法来注释文本,这不是有效的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评论:
//)在CSS ~Tab Atkins,Jr.,CSS工作组中最后,另请注意:
您在标准的未加前缀版本之后放置了供应商前缀代码.
#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)版本应该是最后一个,因此它始终是级联中的首选版本.阅读更多.