因此,在尝试使用flexbox创建一个有用的模式时,我发现了什么似乎是一个浏览器问题,我想知道是否有一个已知的修复或解决方法 - 或者如何解决它的想法.
我想解决的问题有两个方面.首先,使模态窗口垂直居中,这可以按预期工作.第二个是让模态窗口滚动 - 外部,所以整个模态窗口滚动,而不是其中的内容(这样你就可以有下拉列表和其他可以扩展到模态边界之外的UI元素 - 像自定义日期选择器等)
但是,当将垂直居中与滚动条组合时,模态的顶部在开始溢出时可能无法进入.在上面的示例中,您可以调整大小以强制溢出,这样做可以让您滚动到模态的底部,但不能滚动到顶部(第一段被截断).
这是示例代码的链接(高度简化)
https://jsfiddle.net/dh9k18k0/2/
.modal-container {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
overflow-x: auto;
}
.modal-container .modal-window {
display: -ms-flexbox;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// Optional support to confirm scroll behavior makes sense in IE10
//-ms-flex-direction: column;
//-ms-flex-align: center;
//-ms-flex-pack: center;
height: 100%;
}
.modal-container .modal-window .modal-content {
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
width: 100%;
max-width: 500px; …我必须使用justify-content：center将块居中，使其位于其父div的中心。并且，如果内容超出了需要的宽度，我需要使用overflow-x：scroll，以便所有块都位于同一行。问题是，使用justify-content隐藏了一些起始块：
注意：如果块的数量限制为3或4或更小，我需要将所有内容放在中间。
请通过此链接
.nav-tabs {
overflow-x: scroll;
border: 0;
display: flex;
align-items: stretch;
flex-wrap: nowrap;
justify-content: center;
}
.nav-tabs .nav-item {
width: 20%;
min-width: 198px;
float: left;
display: flex;
align-items: stretch;
text-align: center;
margin-bottom: 0;
}<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link" href="#tab-1">
<span class="iconWrapper"><i class="fa fa-facebook"></i></span>
<span class="iconText">TAB 1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-2">
<span class="iconWrapper"><i class="fa fa-twitter"></i></span>
<span class="iconText">TAB 2</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#tab-3">
<span class="iconWrapper"><i class="fa fa-linkedin"></i></span>
<span class="iconText">TAB 3</span> …我遇到以下情况，当文本不再适合容器时，该文本会在顶部被截断。我该如何解决？如果文本比容器小，我仍然希望文本居中，并且我不能更改容器的大小。
div {
display: flex;
align-items: center;
width: 100px;
height: 50px;
overflow: auto;
word-break: break-word;
}<div>
sdjhfkahsdkjfadsfhk jaskjfsj fsldflkasjklsjflakj flksjfakljflksjflkasfjklasjflfd
</div>