Question

我正在尝试在我的网站上使用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>

Answer 1

默认情况下，Flex元素不会换行。当您使用包装时，如果您还指定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%更改为百分比。

Flexbox列和行

1 个答案: