68908


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

[code]

    </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>
    
[/code]

[code]

    .flex {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    .flex>* {
        flex-basis: 300px;
        background: #fff;
        text-align: center;
    }
    
    .flex>* {
        border: 1px solid #aaa;
    }
    
[/code]


CC BY-SA 4.0
2020-07-24T08:43:20.673
68907
2020-07-24T09:48:34.213
2020-07-24T08:44:56.127
32986
40856
question
html css
CSSでflexを設定できたのですが、全体を中央にしたいです。


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

[code]

    .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;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2020-07-24T09:14:24.587
68908
2020-07-24T09:14:24.587
32986
68907
answer