溢出:自动导致使用 Flexbox 切断垂直居中的项目

切断垂直居中的项目

关注

发信

关注(28)粉丝(399)

溢出:自动导致使用 Flexbox 切断垂直居中的项目

本文介绍了溢出:自动导致使用 Flexbox 切断垂直居中的项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

第一个链接是 flexbox 2009 模型:

http://jsfiddle.net/vLKBV/


<div style="background:#f00;width:50px">
<div style="display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;background:#0f0;-webkit-box-flex:1;overflow-Y:scroll><div style="background:#000;width:10px;height:300px">你好

<div style="background:#f00;width:50px">

第二个是2011-2012年修订版:

http://jsfiddle.net/MNRgT/1/


<div style="background:#f00;width:50px">
<div style="display:-webkit-flex;-webkit-align-items:center;-webkit-justify-content:center;background:#0f0;-webkit-flex:1;overflow-Y:scroll"><div style="background:#000;width:10px;height:300px">你好

<div style="background:#f00;width:50px">

如果垂直调整结果大小，您会看到HELLO"在较新的 flex 模型中消失，如果向下滚动，它会为您提供底部空白.另一方面，旧的 flex 模型的行为是正确的.

在最新的 Chrome v26.0.1410.65 中有没有办法解决这个问题?

解决方案

不幸的是，2009 和 2012 规范之间的差异不仅仅涉及不同的属性名称.实施不完整的草稿始终是一场赌博，因此假设遵循较新规范的浏览器是具有正确行为的浏览器总是更安全的(即使这不是您想要的行为).

Flexbox 的美妙之处在于它提供了许多不同的方式来实现特定的布局.Flexbox 被低估的功能之一是 auto 用于顶部和底部边距的值确实与听起来一样，而且它正是您在这里所需要的，而不是 justify-contents/align-items.

http://codepen.io/cimmanon/pen/DEnHh

html, body {背景:#000；宽度:100%；高度:100%；边距:0；}div.container {显示:-webkit-box；显示:-moz-box；显示:-webkit-flexbox；显示:-ms-flexbox；显示:-webkit-flex；显示:弹性；高度:100%；}div.side {背景:#F00；宽度:50px；}div.center {显示:-webkit-box；显示:-moz-box；显示:-webkit-flexbox；显示:-ms-flexbox；显示:-webkit-flex；显示:弹性；-webkit-box-align:居中；-moz-box-align:居中；-webkit-box-pack: 中心；-moz-box-pack:中心；-webkit-box-flex: 1;-moz-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;弹性:1；溢出-Y:滚动；背景:#0f0；}div.child {保证金:自动；背景:白色；宽度:10em；}<div class="容器"><div class="side"></div><div class="center"><div class="child">Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Phasellus porta elit vel ante hendrerit facilisis.Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec.
<div class="side"></div>

The first link is flexbox 2009 model:

http://jsfiddle.net/vLKBV/

<div style="display:-webkit-box;height:100%">
<div style="background:#f00;width:50px">
</div>
<div style="display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;background:#0f0;-webkit-box-flex:1;overflow-Y:scroll">
    <div style="background:#000;width:10px;height:300px">
        HELLO
    </div>
</div>
<div style="background:#f00;width:50px">
</div>

and the second one is the revised 2011 - 2012 version:

http://jsfiddle.net/MNRgT/1/

<div style="display:-webkit-flex;height:100%">
<div style="background:#f00;width:50px">
</div>
<div style="display:-webkit-flex;-webkit-align-items:center;-webkit-justify-content:center;background:#0f0;-webkit-flex:1;overflow-Y:scroll">
    <div style="background:#000;width:10px;height:300px">
        HELLO
    </div>
</div>
<div style="background:#f00;width:50px">
</div>

If you resize the result vertically you will see that "HELLO" dissapears in the newer flex model, and if you scroll down, it gives you a bottom white space. On the other hand the older flex model behaves correctly.

Is there any way around this in newest Chrome v26.0.1410.65?

解决方案

Unfortunately, the difference between the 2009 and 2012 specifications involves more than just different property names. Implementing incomplete drafts is always a gamble, so its always safer to assume that browsers following the newer spec are the ones with the correct behavior (even if it isn't the behavior you want).

The beauty of Flexbox is that it offers a lot of different ways to achieve a particular layout. One of the underplayed features of Flexbox is that the value of auto for top and bottom margins really does what it sounds like, and its just what you need here in place of justify-contents/align-items.

http://codepen.io/cimmanon/pen/DEnHh

html, body {
  background: #000;
  width: 100%;
  height: 100%;
  margin: 0;
}

div.container {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  height: 100%;
}

div.side {
  background: #F00;
  width: 50px;
}

div.center {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow-Y: scroll;
  background: #0f0;
}

div.child {
  margin: auto;
  background: white;
  width: 10em;
}

<div class="container">
  <div class="side"></div>
  <div class="center">
    <div class="child">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec.
    </div>
  </div>
  <div class="side"></div>
</div>

这篇关于溢出:自动导致使用 Flexbox 切断垂直居中的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

07-30 09:37