问题
<!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>
I use a video inside a flexbox like the above and the code works fine except two points: 1) The video size does not fit the control line that is below. How can I make it fit? I think it has something to do with the alignment... 2) I want the video to be resized horizontally only. For that, I searched and use width: 100% and it works but as I resize it the right part seems to ignore the margin that I give it:
回答1:
justify-content: center;
align-items: center;
Add the above styling to the css. Try the snippet below
<!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>来源：https://stackoverflow.com/questions/48599918/html-css-video-inside-flexbox