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

Я думаю, что flex - это хорошее решение для разработки панели управления видеовходом. Примером может служить панель управления амазонки.Как я могу получить квадратные кнопки в гибком макете с помощью CSS?

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

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

источник

2016-03-23 Katharina Schmidt

Если вы хотите иметь высоту и ширину дна как отношение ширины страницы, вы должны использовать оболочку для кнопок:

.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> элементы в виде кнопок (I см. использование изображений в качестве фона) и установка их обертки как «display: inline-block»
Чтобы избавиться от изображений или запросов изображений, вы можете использовать только элементы <img> с прозрачными данными изображения, предоставленными встроенными с URI data: с (1: 1 для квадрата)

источник

2016-03-23 14:03:27 Pandaiolo

Ваше первое решение идеально подходит. Спасибо! –

Добро пожаловать! Не могли бы вы подумать о том, чтобы подтвердить или проверить его как принятый ответ? Благодаря! – Pandaiolo

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

ответ

Смежные вопросы