CSSでフレックスレイアウトの四角形のボタンを取得するにはどうすればよいですか？

フレックスは、応答性の高いビデオプレーヤーコントロールバーを開発するための良い解決策だと思います。この例は、アマゾンプレイヤーのコントロールバーです。CSSでフレックスレイアウトの四角形のボタンを取得するにはどうすればよいですか？

左右には四角いボタンが必要です。プログレスバーは残りのスペースを取得します。

パディングトップを高さに設定することを考えましたが、動作しません。

どうしたのですか？

<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のテクニックは、次のようになります。要素は、私がキャプションを削除し、0ここ

にline-heightを設定する理由です

は結果である（その直角度を壊し、それ以外の要素の高さに追加する）任意の非絶対的要素が含まれていません。 https://jsfiddle.net/jsfmb9at/3/

編集：私はこれらの非膨張要素からflex-grow: 1を除去し、.square CSSにmax-widthを追加し、そうでない場合は、コントロールバーが奇妙である、水平方向の選手には大きすぎる...

点の

その他の解決策：ページの高さの比で、最も簡単な方法は、単にボタンとして高さの割合としてcontrol-bar高さ、および平方<img>要素を設定することです幅ボタンの

（I画像を画像として使用し、背景として使用することを参照）、ラッパーを 'display：inline-block'に設定する
画像または画像要求を取り除くには、data:のURIを持つインラインで提供される透明な画像データを持つ<img>要素を要求される比率（正方形に対して1：1）

出典

2016-03-23 14:03:27 Pandaiolo

あなたの最初のソリューションは完璧です。ありがとうございました！ –

あなたは大歓迎です！あなたはupvoting /受け入れられた答えとしてそれをチェックすることを検討しますか？ありがとう！ – Pandaiolo

CSSでフレックスレイアウトの四角形のボタンを取得するにはどうすればよいですか？

答えて

関連する問題