

[![画像の説明をここに入力](https://i.stack.imgur.com/iSDEk.png)](https://i.stack.imgur.com/iSDEk.png)

上のようにflec containerに合わせてitemの幅が広がってしまうのですが、  
これを"item"のコンテンツ幅に合わせるにはどうすればよいのでしょうか？

[html]

[code]

     <!DOCTYPE html>
        <html>
          <head>
            <meta charset="utf-8">
            <title>Practice</title>
            <link rel="stylesheet" href="styles.css">
    
          </head>
    
          <body>
        <div class="container">
            <p class="item">item</p>
            <p class="item">item</p>
            <p class="item">item</p>
        </div>
    
    
          </body>
    
    
        </html>
    
[/code]

[css]

[code]

    @charset "UTF-8";
    
    *{
      margin: 0;
      padding: 0;
      text-align: center;
    }
    
    /*中の幅に合わせて縦並びにしたい*/
    .container{
        display: flex;
        background: skyblue;
        justify-content: space-between;
        flex-direction: column;
    }
    
    .item{
        background: tomato;
        flex: 0 1 auto;
    }
    
[/code]


CC BY-SA 3.0
2017-05-22T13:37:58.410
34936
2017-05-23T04:13:34.750
12297
question
html css
Flexboxでコンテンツの幅に合わせて縦並びにしたい。


.item に

[code]

    margin: 0 auto;
    
[/code]

を加えるとどうでしょうか


CC BY-SA 3.0
2017-05-23T03:48:25.100
34949
2017-05-23T04:13:34.750
2017-05-23T04:13:34.750
19110
23280
34936
answer

[code]

    align-items:center
    
[/code]

で出来ました！


CC BY-SA 3.0
2017-05-23T03:54:49.610
34950
2017-05-23T03:54:49.610
12297
34936
answer