web-dev-qa-db-ja.com

Flexboxボックス間のマージン

align-contentプロパティのおかげで、フレックスボックス間のマージンを自動的に設定できることは知っていますが、pxで設定された固定マージンである必要があります。複数列のcolumn-gapに似たものを探しています。

これが私がする必要があることです：

demo

ここでは、1,2,3と4,5の間のスペースは等しく、たとえば30pxです。何か案が？

cssflexboxmargins
11
rooofl

解決策は、コンテナーにマージンと負のマージンを使用することです（追加のラッパーが必要です）。

デモ：http://jsbin.com/gozup/1/edit?html,css,output

[〜＃〜] html [〜＃〜]

<wrapper>
  <container>
    <column>1</column>
  </container>
</wrapper>

[〜＃〜] css [〜＃〜]

wrapper {
  overflow: hidden;
  width: 250px;
}
container {
  display: flex;
  flex-wrap: wrap;
  margin: -25px;
}
column {
  flex: 0 1 50px;
  height: 50px;
  margin: 25px;
}
42
bpierre