Question

我目前正在努力实现我认为简单的任务：

包含两个自动调整大小的（flex: 0 0 auto;）子元素的弹性行，这些子元素垂直和水平居中。
孩子们自己就是弹性柱子。
在其中一个子元素中，我想要一个流畅的YouTube视频。

这是我怀疑可以使用的初始代码：

好的，简单。这很好，我很高兴。现在我构建我的.flex-video类：

/* Taken from http://foundation.zurb.com/sites */
.flex-video {
  position: relative;
  height: 0;
  padding-bottom: 75%;
  margin-bottom: 1rem;
  overflow: hidden;
}

  .flex-video iframe,
  .flex-video object,
  .flex-video embed,
  .flex-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .flex-video.widescreen {
    padding-bottom: 56.25%;
  }

  .flex-video.vimeo {
    padding-top: 0;
  }

现在，当我们将它们放在一起并将.flex-video嵌套在我们的一个子flex列中时，布局会中断。看来包含.flex-video的父级flex列无法计算其尺寸。

http://codepen.io/tatemz/pen/qZMKdz

Answer 1

这是你之后的事吗？ http://codepen.io/anon/pen/rLNedq?editors=1100

.child {
  flex: 0 0 50%;
  max-width: 200px;
}

我刚刚将您的展示基础更改为50%而不是auto，并且我已将max-width声明更改为一个级别。

但是，当你说＆＃34;自动调整大小＆＃34;时，它不清楚你指的是什么尺寸。您是否希望它从width和height属性的大小开始，然后调整以适应容器？如果是这样，那么将flex增长/缩小属性设置为0并不起作用。

如果您澄清了您希望实现的目标，那么有人可以更轻松地回答您的问题。

Flexbox bug .flex-video

1 个答案: