3

サイトで CSS3 flexbox を使用しようとしていますが、うまくいきません。

素敵な 3 列のレイアウトを作成できますが、特定の画面解像度で 3 番目の列を 2 番目の列の下に折り返す必要があります。これはフレックスボックスを使用して可能ですか?それとも、より伝統的な方法に戻す必要がありますか?

私のコードはhttp://jsfiddle.net/eFeC3/にあります。これは、私のコードが現在どのように見えるか、およびフレックスボックスの実装を示しています。

<style>
body > * > *{background:#666;color:#eee;padding:40px;margin:20px;text-align:center;}
/* Flex */
article{display:-webkit-flex}
section{-webkit-flex:1;-webkit-order:2}
nav{-webkit-order:1}
aside{-webkit-order:3}

/* Nasty */
#b, #c {overflow:hidden}
#a{float:left;margin:0px 40px 80px 20px}
</style>
<body>
   <article>
      <section>1</section>
      <aside>2</aside>
      <nav>3</nav>
    </article>

<div id="demo">
    <div id="a">3</div>
    <div id="b">1</div>
    <div id="c">2</div>
</div>
4

1 に答える 1

1

Flex 要素はデフォルトでは折り返されません。折り返しを利用する場合、 a も指定して、これがこの要素の理想的な幅であることを示すと、最も効果flex-basis的です。

http://codepen.io/cimmanon/pen/Axutc

article {
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

section {
  -webkit-flex: 1 20em;
  -ms-flex: 1 20em;
  flex: 1 20em;
  -webkit-flex-order: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}

nav {
  -webkit-flex: 1 10em;
  -ms-flex: 1 10em;
  flex: 1 10em;
  /* by default, flex elements have an order of 0 */
}

aside {
  -webkit-flex: 1 10em;
  -ms-flex: 1 10em;
  flex: 1 10em;
  -webkit-flex-order: 2;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
}

特定のブレーク ポイントで要素を並べ替える必要がある場合、唯一のオプションはメディア クエリを使用することです。メディア クエリを使用flex-basisして、独自にラップする場所に不満がある場合は、パーセンテージを変更することもできます (例: flex: 1 20%)。

于 2013-04-16T14:09:01.713 に答える