Question

我想在Flexbox行包装容器的大项之间放置空格。

在我提出问题之前，请先看看下面链接中文章末尾的最后一个Codepen示例（＆＃34;让我们通过灵活使用弹性项目来尝试更好的东西！＆＃34）： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我的问题; 当窗口最宽（> 800px）时，如何在黄色，蓝色和红色（两个旁边和主要）之间添加空间？此刻他们在一排弯曲，但互相盯着。

我的理解：项目之间没有空格，因为蓝色（主要）将占据其宽度的100％在flex之外，因为其中的所有文本。但是，如果黄色，蓝色和红色不超过，我们说每个20％宽，那么我们之间会有空间（总空间为100％ - 3x20％= 40％）。

我的问题：尽管我有一个或几个项目，其Flexbox之外的个别宽度因为里面有大量文本而100％，我想在它们之间有空格的行上展开它们。这很容易吗？

谢谢

Answer 1

相当简单，只需使用保证金。您可以将margin: 0 100px放在main上（我的首选方法），或者在第一个旁边添加右边距，在第二个边距添加左边距。窃取Chris的（已编译）代码，它看起来像这样（你可能必须全屏打开代码段）：

＆＃13;

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
}

.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

@media all and (min-width: 600px) {
  .aside {
    flex: 1 auto;
  }
}
@media all and (min-width: 800px) {
  .main {
    flex: 3 0px;
    margin: 0 100px;
  }

  .aside-1 {
    order: 1;
  }

  .main {
    order: 2;
  }

  .aside-2 {
    order: 3;
  }

  .footer {
    order: 4;
  }
}
body {
  padding: 2em;
}

＆＃13;

<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
  </article>
  <aside class="aside aside-1">Aside 1</aside>
  <aside class="aside aside-2">Aside 2</aside>
  <footer class="footer">Footer</footer>
</div>

＆＃13;

不需要使用width（或flex-basis）。

在CSS Flexbox换行的大项目之间留出空间

1 个答案: