3

我正在尝试在我的网站上使用 CSS3 flexbox，但效果有限。

我可以创建一个可爱的 3 列布局，但我希望第三列以特定的屏幕分辨率包裹在第二列之下。是否可以使用 flexbox，或者我必须恢复到更传统的方法？

我的代码位于http://jsfiddle.net/eFeC3/，它显示了我的代码当前的外观以及 flexbox 实现。

<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 元素默认不换行。当您使用包装时，如果您还指定 aflex-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 回答