Question

我正在尝试使用flexbox来制作响应式布局。很简单，当浏览器窗口的高度和宽度被操纵时，我试图将图像放在this example的中心，就像this example一样。

这两个例子几乎相同，只是在第一个例子中，添加了一个具有设定高度的蓝色横幅。绿色横幅需要占用剩余的垂直空间，图像需要尊重绿色横幅的高度。

*注意：蓝色横幅高度在某种意义上是动态的，在呈现页面之前我不知道高度是多少。它在200px的示例中进行了硬编码，因此该示例将起作用。

非常感谢任何帮助。

代码示例：

<html>
  <body>
    <div class="wrapper">
      <div class="imageWrapper">
        <img src="http://fpoimg.com/1000x800">
      </div>
    </div>
    <div class="stacksWrapper"></div>
  </body>
</html>

    * { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
html { 
  margin:0; 
  padding:0; 
  height:100%; 
  width: 100%; 
}
body { 
  margin:0; 
  padding:0;  
  background:red; 
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.wrapper { 
 width: 100%;
  text-align: center;
  background: green;
  flex: 1;
  flex-basis: 0;
  min-height: 0;
  position: relative;
}

.imageWrapper {
  height:100%; 
  width: 100%;

  img {
      max-height:100%; 
      max-width:100%; 
      width: auto;
  }
}

.stacksWrapper {
  height: 200px;
  width: 100%;
  background-color: blue;
}

Answer 1

您可以向flexbox元素添加三个.wrapper属性：

.wrapper {
  width: 100%;
  text-align: center;
  background: green;
  flex: 1;
  flex-basis: 0;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Answer 2

你也可以使用flex作为图像包装器，你可以将图像设置在绝对位置，以避免看到它缩小：

.imageWrapper {
  height: 100%;  
  width: 100%;
  display:flex;

  img {
      max-height:100%; 
      max-width:100%; 
    /* cure shrinking effect */
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0; 
    /* end cure shrinking effect */
      margin:auto;
  }
}

http://codepen.io/gc-nomade/pen/wWKGOK

Flexbox子项不尊重其父级的边界

2 个答案: