0
私はメディアのクエリが適用され、その目標を達成するように見えない場合、2つのコンテナを横に並べて取得しようとしています。これは、3つの列とフッターを持つ単純なヘッダーです。目標は、NavとAsideの両方を同じ行に並べることです。私は2行をサイズを小さくすることができますが、私はそれをラップすることはできません。私はflex-flow: row wrap;とmin-height: auto;フレックスボックスconundrum
を追加したら、事前に 感謝
body {
font: 24px Helvetica;
background: #999999;
}
#main {
min-height: 100vh;
margin: 0px;
padding: 0px;
display: flex;
flex-flow: row;
}
#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #dddd88;
flex: 3 1 60%;
order: 2;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
flex: 1 6 20%;
order: 1;
}
#main > aside {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
flex: 1 6 20%;
order: 3;
}
header,
footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
}
/* Too narrow to support three columns */
@media all and (max-width: 640px) {
#main,
#page {
flex-direction: column;
}
#main > aside,
#main > nav {
width: 47%;
order: 1;
}
#main > nav,
#main > aside,
header,
footer {
min-height: 50px;
max-height: 50px;
}
}<body>
<header>header</header>
<div id='main'>
<article>article</article>
<nav>nav</nav>
<aside>aside</aside>
</div>
<footer>footer</footer>
</body>
あなたは私たちにあまりにも:-)ください –
HTMLとCSSはすべてのコード – Morrile
の1セット内にあるいくつかのHTMLを与えることができ、私が見るすべてはCSSとCSSメディアクエリ –