<!DOCTYPE html>
<html>
<style>
.d1 {
background: blue;
padding: 10px;
display: flex;
}
video {
margin: 10px;
width: 100%;
max-width: 500px;
}
</style>
<body>
<div class="d1">
<video controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</body>
</html>
我在 flexbox 中使用了一个 video ，除了两点之外，代码工作正常:1) 视频大小不合适适合下面的控制线。我怎样才能让它合适？我认为这与对齐有关... 2) 我希望仅水平调整 video 的大小。为此，我搜索并使用了 width: 100% 并且它有效，但是当我调整它的大小时，正确的部分似乎忽略了我给它的 margin :
最佳答案
justify-content: center;
align-items: center;
将上面的样式添加到 css 中。试试下面的代码片段
<!DOCTYPE html>
<html>
<style>
.d1 {
background: blue;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
}
video {
margin: 1rem;
width: 100%;
}
</style>
<body>
<div class="d1">
<video controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</body>
</html>关于Flexbox 中的 HTML CSS 视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48599918/