実現したいこと
flex-wrap: wrap;で折り返した、.blockの最後の右横に余白が出てしまうので消してぴったり合わせたい。
文字は改行させたくない。画面幅を縮めたときは、.blockを折り返したい。
発生している問題・エラーメッセージ
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>Document</title> 9 <style> 10 *{ 11 margin: 0; 12 padding: 0; 13 box-sizing: border-box; 14 } 15 .container{ 16 border: 10px solid blue; 17 display: flex; 18 flex-wrap: wrap; 19 } 20 .block { 21 border: 1px solid red; 22 white-space: nowrap; 23 } 24 </style> 25</head> 26 27<body> 28 <div class="container"> 29 <div class="block">長い文字長い文字長い文字</div> 30 <div class="block">中くらいの文字</div> 31 <div class="block">短い文字</div> 32 </div> 33</body> 34 35</html>
試したこと
.conteinerのwidthにfit-content,min-content,max-contentを入れてみたり
.containerに親要素を作りその親要素にinline-blockとしてみたりした
回答に対して追記
.conteinerのwidthにfit-contentだと、
短いウィンドウ幅で.blockが折り返されたとき、やはり右横に余白が出てしまいます。