最大化および中央揃えの正方形div

私のページを分割して3つの部分（div）にしたい。最大化および中央揃えの正方形div

中央のdivは、正方形で、利用可能なスペースをすべて取る必要があります。

サイドのdivは、コンテンツの内容とは関係なく、残りのスペースを左右または上下に均等に取らなければなりません。

私は幅に沿ってフレックス使用：100vmin 高さ：100vmin

しかし、私は、イベントハンドラのサイズを変更するウィンドウにフレックス方向を変更する必要があります。

JavaScriptを使用しないとできますか？このよう

// Set the flex direction according to current size 
 
var flexRow = (window.innerWidth >= window.innerHeight); 
 
document.getElementById("main").style.flexDirection = flexRow ? "row" : "column"; 
 

 
// Change the flex direction on window resize 
 
window.addEventListener(
 
\t "resize", 
 
\t function() { 
 
\t \t if (flexRow != (window.innerWidth >= window.innerHeight)) { 
 
\t \t \t flexRow = !flexRow; 
 
\t \t \t document.getElementById("main").style.flexDirection = flexRow ? "row" : "column"; 
 
\t \t } 
 
\t } 
 
);

body { 
 
\t margin: 0; 
 
\t overflow: hidden; 
 
} 
 

 
#main { 
 
\t position: absolute; 
 
\t display: flex; 
 
\t width: 100%; 
 
\t height: 100%; 
 
    background-color: yellow; 
 
} 
 

 
.pan-side { 
 
\t background-color: #999999; 
 
\t flex: 1 1 0; 
 
\t min-width: 0; 
 
\t min-height: 0; 
 
\t padding: 1%; 
 
} 
 

 
#pan-main { 
 
\t width: 100vmin; 
 
\t height: 100vmin; 
 
    background-color: blue; 
 
}

<body> 
 
\t <div id="main"> 
 
\t \t <div id="pan-side1" class="pan-side"></div> 
 
\t \t <div id="pan-main"></div> 
 
\t \t <div id="pan-side2" class="pan-side"> 
 
\t \t </div> 
 
\t </div> 
 
</body>

は

出典

2016-08-02 Guillaume M

を参照してください、あなたが試したコードを投稿してください。作業デモ（例：jsfiddle.net）も参考になります。 –

あなたはこのようにメディアクエリを使用することができます。

.flex {flex-direction:column;} 

@media all and (orientation:landscape) { 
    .flex {flex-direction:row;} 
}

はJSFiddle

出典

2016-08-02 23:25:14 user500665

はい！それは私が欲しいものを正確にするようです。ありがとうございます –

'orientation'メディア機能には注意してください。それがしているのは、ビューポートの幅を高さに照らしてチェックすることだけです。これは極端なビューポートの寸法が、技術的には「ポートレート」または「ランドスケープ」の向きでもレイアウトを破る可能性がある状況につながります。 – Brice

@briceshatzerなぜそれは壊れますか？関心がありません、あなたは、例を作ることができますか、どこかにそのような問題についての情報がありますか？ – user500665

？

var el = document.querySelector('.main'); 
 
if(el.scrollHeight< window.innerHeight){ document.querySelector('.container').style.flexDirection = "column" 
 
}

.container{ 
 
    width:100%; 
 
    display:flex; 
 
    justify-content:center; 
 
} 
 
.main{ 
 
    background-color:blue; 
 
    width:100vmin; 
 
    height: 100vmin; 
 
}

<div class="container"> 
 
    <div class="alt"></div> 
 
    <div class="main"></div> 
 
    <div class="alt"></div> 
 
</div>

出典

2016-08-02 23:21:27 Brice

それはほとんど私がやったことだが、私はjavascriptなしでそれを望む –

最大化および中央揃えの正方形div

答えて

関連する問題