TransWikia.com

CSSでflexを設定できたのですが、全体を中央にしたいです。

スタック・オーバーフロー Asked on December 26, 2021

CSSでflexを設定できたのですが、全体を中央にしたいです。

</html>
  <body>
    <div class="flex">
      <p>0</p>
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p>6</p>
      <p>7</p>
      <p>8</p>
      <p>9</p>
    </div>
</body>
</html>

.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.flex>* {
    flex-basis: 300px;
    background: #fff;
    text-align: center;
}

.flex>* {
    border: 1px solid #aaa;
}
csshtml

One Answer

各行の flex アイテムの数と flex アイテムの幅が決まっていない限り、その状態で flex コンテナを中央に寄せることは Flexbox では不可能です。代わりに Grid Layout を用いることで、そのような動作を実現出来ます。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  justify-content: center;
}

.grid>* {
  flex-basis: 300px;
  background: #fff;
  text-align: center;
  border: 1px solid #aaa;
}
<div class="grid">
  <p>0</p>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
</div>

Answered by supa on December 26, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP