html – 响应式flexbox – 包装后将边距从水平变为垂直?
我有一个简单的布局概念,可以通过这张图片进行总结:
使用flexbox可以轻松实现这一点.如您所见,div#1和div#3触及其容器的边框.此外,div#1和div#2之间的余量等于div#2和div#3之间的余量.它可以通过以下方式完成: .inner-div{ margin-left:10px; } .inner-div:first-child{ margin-left:0px; } 现在,假设视口的宽度减小.我希望这些div包装形成一个漂亮的列.我希望他们看起来像这样: 但如果这些div保留其水平边距配置,它们看起来像这样: 你可以猜测,这是不可取的. 当容器如此狭窄以至于被“包裹”时,如何更改那些内部div的边距?有没有办法编写一个只适用于“包装”div的条件规则?或者我错过了重点,解决方案非常明显,我只是忽略了灵活盒功能的这一部分? 解决方法
您绝对可以使用负边距来实现这一目标.
看看这个小提琴:http://jsfiddle.net/287vW/ 如果您甚至不打算从第一个元素中删除边距但是保留它,并全局减少容器的边距,您将得到一致的结果. 假设您有以下结构: <div class="margin"> <div class="container"> <div class="box one"></div> <div class="box two"></div> <div class="box three"></div> </div> </div> 然后你可以应用这些样式: .margin { border:3px solid #000000; } .container { display:flex; flex-wrap:wrap; margin:-10px 0 0 -10px; } .box { height:100px; background-color:#555555; margin:10px 0 0 10px; flex-grow:1; min-width:300px; } 即使我们保留元素的所有边距,容器的负边距也会删除它们. 请参考上面提到的JS Fiddle获得结果. 我相信这可以通过减少一个div来实现,但我认为你现在可以自己解决这个问题. 希望它有帮助:) P.S.:如果你想了解更多有关负边距的信息,请参阅有关粉碎mag:http://www.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/的这篇文章 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |