web-dev-qa-db-ja.com

フレックスボックス：スペースでコンテンツを正当化し、すべてを中央揃えにする方法は？

Flexboxで問題が発生しています。

最大幅が920pxのdivがあります。コンテンツのボックスでdivを左から右に最大幅まで埋め、すべてのマージンを等しくします。画面サイズが1行あたり1つのボックスになったら、そのボックスを画面の中央に配置します。

これが実際のサイトです： http://javinladish.com/code/index.html

私が使用する場合：

justify-content: center;

次に、ボックスは最大幅を埋めません。

私が使用する場合：

justify-content: space-between;

その後、行ごとに1つのボックスに下がっても、ボックスが中央に配置されません。

どうすれば2つのバランスをうまく取れますか？つまり、コンテナの最大幅を埋めて、すべてのコンテンツを中央に維持しますか？

よろしくお願いします。

htmlcssflexbox
27
javinladish

最善の解決策は、margin: auto;フレックスアイテムの水平マージンは次のようになります。

    .flexbox {
       background-color: pink;
       display: flex;
       justify-content:  space-between;
       flex-wrap: wrap;
    }
    .flex-item {
       width: 175px;
       height: 175px;
       background-color: grey;
       margin: 10px auto;
    }
    <div class="flexbox">
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
       <div class="flex-item"></div>
    </div>

唯一の問題は、最後の行に複数のアイテムがあり、行全体を埋めるには不十分な場合、最後の行のアイテム間に多くのスペースが存在する可能性があります。

12
martin schwartz

justify-content: space-between;は常に、アイテムをコンテナの行の端まで押し広げます。別の行の要素が中央に配置されることはありません。

私は負のマージンで成功しましたが、これはそれらのマージンを明示的に設定したことを意味します：

JS Fiddle例

HTML

<div class="grid">
  <div class="grid__elem">
    TEST 1
  </div>
  <div class="grid__elem">
    TEST 2
  </div>
  <div class="grid__elem">
    TEST 3
  </div>
  <div class="grid__elem">
    TEST 4
  </div>
  <div class="grid__elem">
    TEST 5
  </div>
  <div class="grid__elem">
    TEST 6
  </div>
  <div class="grid__elem">
    TEST 7
  </div>
</div>

SCSS

.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-left: -2%;
  &__elem {
    width: 18%;
    background: red;
    color: white;
    margin: 0 0 2% 2%;
  }
}

align-selfを介して特定の要素をターゲットにするオプションもありますが、これは実際の例では役に立たないことがわかりました。 このリンク を参照してください。

1
chocolata

親のdivでjustify: space-beween;次も含めます：align-items: center;

したがって、次のように書くことができます。

.navbar-wrapper {
    display: flex;
    flex-direction: row;
    justify: space-between;
    align-items: center;
}
1
Noah

あなたは一度に2つの行動を求めているようです。コンテナのjustify-content: centerとflex-wrap: wrapで成功し、子に適切な左マージンと右マージンを設定しました。次に、その同じ量を負のマージンとしてコンテナに適用すると、子のエッジがコンテナに揃います。

.parent {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 -3rem;
}

.child {
    align-self: center;
    margin: 0 3rem 6rem 3rem;
}
0
Isaac F