40803


flex itemの中の文字をitemの幅に合わせて折り返すにはどうしたら良いでしょうか？

[code]

    word-wrap: break-word;
    
[/code]

だとうまくいきません。

[code]

    .container {
      display: flex;
      flex-wrap: wrap;
    }
    
    .item {
      background-color: skyblue;
      height: 150px;
      width: 150px;
      margin: 3px;
    
      display: flex;
      align-items: center;
      justify-content: center;
    }
[/code]

[code]

    <div class="container">
      <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
      <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
      <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
      <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
      <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
      <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
      <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
      <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
      <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
      <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
      <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
      <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
      <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
      <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
      <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
      <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
      <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
      <div class="item"><a href="https://www.yahoo.co.jp/" >https://www.yahoo.co.jp/</a></div>
    </div>
[/code]

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

青い四角：flex container  
リンク：flex item

となっています。


CC BY-SA 3.0
2018-01-04T15:24:44.687
40725
2018-01-08T00:50:51.040
2018-01-04T19:23:51.980
3068
12297
question
css
flex itemの中の文字をitemの幅に合わせて折り返すにはどうしたら良いでしょうか？


親要素を

[code]

    display:grid
    
[/code]

とするとできました！

ありがとうございました！


CC BY-SA 3.0
2018-01-08T00:50:51.040
40803
2018-01-08T00:50:51.040
12297
40725
answer