Как получить квадратные кнопки в гибком макете с помощью CSS?

Я думаю, что flex - это хорошее решение для разработки адаптивной панели управления видеоплеером. Пример - панель управления проигрывателем Amazon.

Слева и справа я хочу квадратные кнопки. Индикатор выполнения получает остальное пространство.

Я думал об установке 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>

Источник

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 к .square css, в противном случае панель управления слишком велика для горизонтальных игроков, что странно...

Другие решения:

  • Для кнопок, ширина которых является отношением высоты страницы, самый простой способ будет просто установить control-bar высота в процентах от высоты и площади <img> элементы в виде кнопок (я вижу, вы используете изображения в качестве фона) и устанавливаете их оболочку как "display: inline-block"
  • Чтобы избавиться от изображений или запросов изображений, вы даже можете использовать <img> элементы с данными прозрачных изображений, предоставленных в виде data: URI с необходимым соотношением (1:1 для квадрата)
Источник
Другие вопросы по тегам