Question

我认为flex是开发响应式视频播放器控制栏的好方法。这个例子是亚马逊玩家的控制栏。

在左侧和右侧我想要方形按钮。进度条获得剩余的空间。

我考虑过将padding-top设置为等于高度，但它不起作用。

有什么问题？

<html lang="en" class="no-js">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="Content-Type" content="image/svg+xml"/>
<meta http-equiv="X-UA-Compartible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Player flex</title>

    <style>
    html {
        margin: 0px;
        padding: 0px;
        border: 0px;
        }

    body {
        margin: 0px;
        padding: 0px;
        border: 0px;
        }

    .pic {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .pic img {
       object-fit: contain;
    }

    .control-bar {
        display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
        display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
        display: -ms-flexbox;      /* TWEENER - IE 10 */
        display: -webkit-flex;     /* NEW - Chrome */
        display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */


        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 10%;
    }

    .pause_btn {
        flex-grow:1;
        background-color: DD88EE;
        background-image: url(media/pause-icon-white-48.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        min-height: 40px;
        min-width: 40px;            
    }

    .time {
        flex-grow:1;
        background-color: #CB8C1D;
        min-height: 40px;
        min-width: 40px;
    }

    .fullscreen_btn {
        flex-grow:1;        
        background-color: #4C3327;
        background-image: url(media/fullscreen-icon-off-white-48_160.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    .sound_btn {
        flex-grow:1;
        background-color: #BD3632;
        background-image: url(media/speaker_loud_white_48.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;            
    }

    .progress {
        flex-basis:50%;
        flex-grow:1;        
        background-color: #4C3327;
        min-height: 40px;
        min-width: 40px;
    }

    @media (min-width: 769px) {
        .duration{
            flex-grow:1;
            background-color: #CB8CEE;
            min-height: 40px;
            min-width: 40px;
        }
    }

    </style>
</head>
<body style="background-color:black; text-align: center;">

    <div class="pic">
        <img src="media/vorschaubild.png" alt="Smiley face" height="100%" width="100%">
    </div>
    <div class="">
        <div class="control-bar-wrapper">
            <div class="control-bar">
                <div class="pause_btn">pause</div>
                <div class="time">time</div>
                <div class="duration"></div>
                <div class="progress">progress</div>    
                <div class="sound_btn">sound</div>
                <div class="fullscreen_btn">full</div>
            </div>
        </div>
    </div>
</body>

Answer 1

如果您希望将底部的高度和宽度作为页面宽度的比例，则必须使用按钮的包装：

    .square {
      width: 10%; // Width = 10% of page with
    }

    .square div {
      padding-bottom: 100%; // So height = 10% of page width
      line-height: 0px;     // Avoid additional height
    }

按钮元素包裹如下：

    <div class="square">
       <div class="pause_btn"></div>
    </div>

此外，padding-bottom技术暗示元素不包含任何非绝对元素（否则会增加元素的高度，从而破坏其正方形）

这就是我删除字幕并将line-height设置为0

的原因

结果如下：https://jsfiddle.net/jsfmb9at/3/

修改：我从这些非扩展元素中删除了flex-grow: 1，并在max-width css中添加了.square，否则控制栏在水平播放器上太大了，这很奇怪......

其他解决方案：

对于宽度为页面高度比例的按钮，最简单的方法是将control-bar高度设置为高度的百分比，将方形<img>元素设置为按钮（我看到您使用图像），作为背景）并将其包装设置为＆＃39; display：inline-block＆＃39;
为了摆脱图像或图像请求，您甚至可以使用<img>元素，其中透明图像数据与data: URI一起提供，并且具有所需的比例（方形为1：1）

如何使用CSS在flex布局中获得方形按钮？

1 个答案: