在柔性盒之间的空间中将项目包装在中心
在柔性盒之间的空间中将项目包装在中心
提问于 2017-05-28 18:12:08
对于导航部分，我希望它使用space-between调整。对于较小的显示，导航可能必须包装，我希望项目自己中心，而不是停留在左边时，单独在一行。
nav {
display: flex;
width: 100%;
flex-flow: row wrap;
justify-content: space-between;
}<nav>
<div class='item'>
Item 1 is alone on its row if the window is small, but is not centered.
</div>
<div class='item'>
Item 2 is very much like item 1.
</div>
</nav>
Codepen演示： https://codepen.io/anon/pen/MmdOMP?editors=1100#0
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-04-04 19:49:57
在我看来，有两种解决方案：
- 使用CSS媒体查询或；
- JS解决方案，解释如下：
当项目被包装时，您需要做的是检查窗口调整项目宽度的事件，如果它相对于父元素(这意味着它已被包装)的100%，那么您可以在此时添加一个类，并在语句为false时删除它：
function justifyCenter() {
var navWidth = $("nav").width();
var itemWidth = $(".item:first-child").width();
if (navWidth === itemWidth ) {
$("nav").addClass('justify-center');
} else {
$("nav").removeClass('justify-center');
}
}Codepen演示： https://codepen.io/anon/pen/WzgpLw
Stack Overflow用户
发布于 2018-01-12 00:20:09
LGSon's comment对我来说是有意义的，但想必OP希望能够修改可能或可能不适合容器中的动态文本，而不管是否使用flexbox配置或媒体查询。
查看检测行包装的JS，然后触发一个操作(例如，对文本进行居中)。
例如：https://github.com/xdamman/js-line-wrap-detector
或者，自动调整文本大小以适应容器的JS。对各种情况都毫无用处。
例如：http://www.fittextjs.com
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44230484
复制相关文章
相似问题
腾讯云开发者
